2

私はこれにしばらく苦労してきましたが、うまくいく解決策を見つけることができないようです。うまくいけば、ここの誰かが助けてくれるでしょう。

コレクション内のすべてのエントリの div をレンダリングし、jQuery を使用して各 div をターゲットにし、その div に対応するエントリに格納されている情報を取得し、データの値に従って CSS を変更しようとしています。

ここに私のテンプレートがあります：

<template name="vis">
    <div id="vis">
        {{#each Actions}}
            <div class="visEntry" id="entry{{ID}}"></div>
        {{/each}}
    </div>
</template>

私はcursor.observe()を使用して、コレクションにエントリが追加されるたびにコールバックを提供しようとしましたが、jQueryを使用して新しくレンダリングされた要素を選択することはできません。コンソールを介して選択したエントリから任意の値を出力し、jQuery を使用してテンプレート以外の div (HTML ファイルにハードコードされている) を選択して変更できますが、必要な要素を選択しても機能しません。

Template.vis.Actions = function(){
    var actions = Actions.find() 
    actions.observe({
        added: function(action){
            var entryHeight = action.Duration
            var entryOffset = ($("#vis").height() - entryHeight) / 2

            var target = "#entry" + action.ID;
            $(target).css({'background-color':'red'})      // Doesn't work
            $("#testDiv").css({'background-color':'red'})  // Works fine
        }
    })
    return actions
}

ライブ ページのソース コードを確認しましたが、jQuery セレクターで使用されている ID は正しいです。entry1、entry2、entry3、および entry4 の 4 つのエントリがありますが、これらは jQuery から見えないように見えます。これは私を夢中にさせているので、誰かが私が間違っていることを知っているなら、フィードバックを聞きたい.

4

1 に答える 1

8

Meteor.template.rendered問題はDOMがまだレンダリングされていないことであると思われるため、この目的で関数を使用できる可能性があります。テンプレートは次のようになります。

<template name="vis">
    <div id="vis">
        {{#each Actions}}
            {{>visEntry}}
        {{/each}}
    </div>
</template>

<template name='visEntry'>
    <div class="visEntry"></div>
</template>

次に、次のようにTemplate.renderedコールバックを使用できます。

Template.visEntry.rendered = function(){
  var mydata = this.data, 
      el = this.find('div.visEntry');

  // jquery code here;
}

内の各テンプレートに関連付けられたデータにアクセスできます。thisまた、組み込みを使用して、findそのテンプレート内の適切なdom要素をフェッチすることもできます。次に、関連するデータを使用して、必要なDOM要素のCSSを設定できます。さらに、テンプレートがMeteor.Collection（ソースではなく）最初に提供された場合fetched、追加/変更/移動されたテンプレートのみがレンダリングされます。事実上、これはあなたがしようとしていたことをあなたに与えると思いますobserve。

于 2012-12-03T08:33:19.143 に答える