Monday, 15 June 2015

Issue running re-active Embedly/jQuery with Meteor 0.9.4 Tracker.autorun -



Issue running re-active Embedly/jQuery with Meteor 0.9.4 Tracker.autorun -

i trying run 3rd party jquery library http://embed.ly reactively when link changes. using new tracker.autorun tell re-run jquery in template .rendered function when session variable 'droppedlink' changes. (i did database reactive variable same issue).

i tried follow best way prevent template helper rerun when unnecessary?

i not sure if need seek approach? meteor 0.8 blaze how update rendered changes jquery plugins seemed more complex washoping simpler autorun should suffice.

on initial render ok (see # 1 below)

when u replace link (see # 2 & 3), variable updates reactively, autorun function runs, result on embedly rendred link incorrect. seems have inserted multiple nested links on page (see screenshots below)

1) here's .rendered function

template.resourceitem.rendered = function() { var self = this; tracker.autorun(function () { var updatedlink = session.get('droppedlink'); console.log("updated url:" + updatedlink + " " + self.data._id); var closestdivwidth = self.$('.embedlylink a').closest('div').width(); self.$('.embedlylink a').embedly({ key: '7c2cb80d45fb4a17babe2cf3bbf29d3e', query: {maxwidth: closestdivwidth} }); }); }

2) here's initial result, link rendered correctly (1st pass):

2) when replace link #2 get:

note rendered link correct, actual embedded text , image incorrect.

3)when replace 3rd link here's image , html rendered:

note rendered link correct, actual embedded text , image incorrect.

here's #3's rendered html: (not see how embedley keeps nesting new links). if refresh page works fine (like #1 above).

example of console.log: no js errors, debug stuff me. sorry not pretty can see autorun stuff working , url getting updated in db correctly, embedly not seem rendering correctly:

```

this id in subs:e97cc28966ca211852c070fc router.js:111 title:0 router.js:113 id in subs:e97cc28966ca211852c070fc router.js:111 title:1 router.js:113 id in subs:e97cc28966ca211852c070fc router.js:111 title:1 router.js:113 can edit, editors: userid:2inqmtms9aklzqxgcin editors array:false permissions.js:11 can edit:true permissions.js:13 activemodal:false modal.js:6 updated url:undefined 00e3ce4f9255b8c3a2453e49 resource_item.js:323 updated url:undefined e97cc28966ca211852c070fc resource_item.js:323 update: 00e3ce4f9255b8c3a2453e49 field:resourceurivalue:http://www.smh.com.au/nsw/man-who-made-corruption-claims-against-councillor-hit-with-80000-damages-bill-20141020-118kid.html globals.js?022c5f844233f60827f7b12e193ea12506c0cf10:18 update: e97cc28966ca211852c070fc field:updatedvalue:1413802243911 globals.js?022c5f844233f60827f7b12e193ea12506c0cf10:18 id in subs:e97cc28966ca211852c070fc router.js?42427feeaf93d51058b2ffbcf1e269df5b9917cc:111 title:1 router.js?42427feeaf93d51058b2ffbcf1e269df5b9917cc:113 updated url:http://www.smh.com.au/nsw/man-who-made-corruption-claims-against-councillor-hit-with-80000-damages-bill-20141020-118kid.html 00e3ce4f9255b8c3a2453e49 resource_item.js?66299ce9ff3edc4ea4e1ebc1ba549cc0eec7a2cd:323 updated url:http://www.smh.com.au/nsw/man-who-made-corruption-claims-against-councillor-hit-with-80000-damages-bill-20141020-118kid.html e97cc28966ca211852c070fc resource_item.js?66299ce9ff3edc4ea4e1ebc1ba549cc0eec7a2cd:323 can edit, editors: userid:2inqmtms9aklzqxgcin editors array:false permissions.js?bc95cfb655413c86e2325bd3f24145b2d6be9e94:11 can edit:true permissions.js?bc95cfb655413c86e2325bd3f24145b2d6be9e94:13 activemodal:false

```

update & possible workaround:

ok, think have worked out what's going on , think it's because both embedly , meteor manipulating dom.

the repetition occurs, when updated url sec time, after embedly has removed <a class"something"> , replaced it's <embed> code. next time it's embedded extract embedly's links getting converted sec time.

this because meteor works without page refreshes , seems not expecting embedly have changed dom too.

so think compensate need remove embed , re-insert <a class="something">, initial pass, before calling embedly. have hints on how please? ie need remove embedley's <div class="embed"> , insert <a href=somelink></a>

this should allow embedly work per initial pass through.

ps. have no thought if manipulating dom way bad bad thing ????

meteor meteor-blaze embedly

No comments:

Post a Comment