0

リンクが変更されたときに、サードパーティの jQuery ライブラリhttp://embed.lyをリアクティブに実行しようとしています。新しい Tracker.autorun を使用して、セッション変数 'droppedLink' が変更されたときに Template .rendered 関数で jquery を再実行するように指示しています。(データベースのリアクティブ変数も使用しましたが、同じ問題です)。

テンプレートヘルパーが不要なときに再実行されるのを防ぐための最良の方法に従ってみましたか?

このアプローチを試す必要があるかどうかわかりませんでしたか?Meteor 0.8 Blaze Jquery プラグインのレンダリングされた変更を更新する方法は、単純な autorun をウォッシュするだけで十分であるため、より複雑に見えました。

最初のレンダリングではすべて問題ありません (以下の 1 を参照)

U がリンクを置き換えると (# 2 と 3 を参照)、変数はリアクティブに更新されます。自動実行機能は実行されますが、Embedly rendred リンクの結果は正しくありません。ページに複数のネストされたリンクが挿入されているようです (以下のスクリーンショットを参照)。

1) .rendered 関数は次のとおりです。

Template.resourceItem.rendered = function() {
    var self = this;

    Tracker.autorun(function () {


        var updatedLink = Session.get('droppedLink');
        console.log("updated url:" + updatedLink + " for " + self.data._id);


        var closestDivWidth =  self.$('.embedlylink a').closest('div').width(); 


        self.$('.embedlylink a').embedly({
            key: '7c2cb80d45fb4a17babe2cf3bbf29d3e',
            query: {maxwidth: closestDivWidth}
        });

    });

}

2) リンクが正しくレンダリングされた最初の結果 (1 回目のパス) は次のとおりです。

ここに画像の説明を入力

2) リンク #2 に置き換えると、次のようになります。

レンダリングされたリンクは正しいですが、実際に埋め込まれたテキストと画像は正しくありません。

ここに画像の説明を入力

3)3番目のリンクに置き換えると、画像とレンダリングされたHTMLが次のようになります。

レンダリングされたリンクは正しいですが、実際に埋め込まれたテキストと画像は正しくありません。

ここに画像の説明を入力

#3 のレンダリングされた HTML は次のとおりです (Embedley が新しいリンクをネストし続ける方法はわかりません)。ページを更新すると、すべて正常に動作します (上記の #1 のように)。

ここに画像の説明を入力

console.log の例: JS エラーはありません。私からのデバッグのみです。あまりきれいではありませんが、自動実行が機能しており、DB で URL が正しく更新されていることがわかります。埋め込みが正しくレンダリングされていないようです。

```

this id in subs:e97cc28966ca211852c070fc router.js:111
title:0 router.js:113
this id in subs:e97cc28966ca211852c070fc router.js:111
title:1 router.js:113
this 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 for 00e3ce4f9255b8c3a2453e49 resource_item.js:323
updated url:undefined for e97cc28966ca211852c070fc resource_item.js:323
about to 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
about to update: e97cc28966ca211852c070fc field:updatedvalue:1413802243911 globals.js?022c5f844233f60827f7b12e193ea12506c0cf10:18
this 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 for 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 for 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

```

更新と可能な回避策:

OK、私は何が起こっているのか理解できたと思います。それは、Embedly と Meteor の両方が DOM を操作しているためだと思います。

EMbedly が を削除してその コード<a class"something">に置き換えた後、2 回目に URL を更新したときのように、繰り返しが発生し<embed>ます。次回は、2 回目に変換された Embedly のリンクを抽出します。

これは、Meteor がページの更新なしで動作し、Embedly が DOM も変更することを予期していなかったように思われるためです。

<a class="something">したがって、これを補うために、Embedly を呼び出す前に、Embed を削除して、最初のパスのように を再挿入する必要があると思います。これを行う方法について何かヒントはありますか? つまり、Embedley を削除<div class="embed">して挿入する必要があります<a href=somelink></a>

これにより、Embedly が最初のパススルーとして機能できるようになります。

ps。このようにDOMを操作することが悪い悪いことなのかどうかはわかりません????

4

0 に答える 0