0

meteor を使用して、単純なデータ入力および視覚化アプリケーションを作成しています。jQuery を使用して、データに基づいて各エントリの css の一部を変更しようとすると、問題が発生します。

エントリが追加されたときに（cursor.observeを使用して）高さの値が計算され、jQueryを使用してその値をcssに適用するように設定しましたが、実際には実行していません。コンソールを使用して値を表示しているため、値が正しく計算されていることがわかります。

これは、このコードの実行時に、これらのエントリの実際の html がまだテンプレートから作成されていないためですか? この場合、html が存在した後に jQuery を実行するように、このコードをどこに貼り付けることができますか?

以下は、この問題に関連するコードです。

Template.mainPanel.Actions = function(){
    var actions = Actions.find()

    actions.observe({
        added: function(action){
            var entryHeight = action.Duration

            console.log("entryHeight: " + entryHeight)

            $('#vis' + action.ID).css({'height':entryHeight})
        }
    })

    return actions
}
4

1 に答える 1

2

アプリに次のようなコードがあると仮定しています。

<template name="mainPanel">
  {{#each Actions}}
    <div id="{{ID}}">Something</div>
  {{/each}}
</template>

Template.mainPanel.Actions からアクション カーソルを返すこととペアになっていること。

観察で複雑なことをする代わりに、次のようにスタイルのリアクティブ ハンドルバーを HTML に直接含めることができます。

<template name="mainPanel">
  {{#each Actions}}
    <div id="{{ID}}" style="height: {{Duration}}px">Something</div>
  {{/each}}
</template>
于 2012-12-14T01:10:30.373 に答える