3

要素が から作成された折りたたみ可能 (マテリアライズ) がありますがfor each、「ドロップダウン」は機能しません。作品にないものすべてfor each。

この問題を解決するにはどうすればよいですか?

jobList.html

<template name="jobList">
<ul class="collapsible" data-collapsible="accordion">
    {{#each jobs}}
        <li>
            <div class="collapsible-header">{{title}}</div>
            <div class="collapsible-body"><p>{{description}}</p></div>
        </li>
    {{/each}}
</ul>

jobList.js

Template.jobList.rendered = function () {
    $('.collapsible').collapsible({
        accordion: false
    });
};

Template.jobList.helpers({
    jobs: function() {
        return Jobs.find();
    }
});

テンプレートjobListは別のテンプレートにあり、{{> jobList}}.

4

1 に答える 1

8

この問題は DOM の準備状況に関連しています。jQuery プラグインの初期化を実行している時点では、{{#each}}ループはまだ HTML 要素をレンダリングしていません。

この問題を解決するためにできることは、繰り返したいカーソルを返す別の関数を定義し、テンプレートautorunのコールバック内でこのカーソルを観察することです。onRendered

カーソル数が変更されたことを検出した場合、それはドキュメントが追加されたことを意味し (特に、サブスクリプションの準備が整い、最初のドキュメント セットがクライアントに送信された場合)、または削除されたことを意味し、jQuery プラグインを再実行する必要があります。初期化。

jQuery の初期化を実行する前に、現在無効になっている他のすべての計算が完了するのを待つことが重要Tracker.afterFlushです。終わり）。

これは、カーソルを返すヘルパーも計算であり、ドキュメントが追加または削除されると無効になり、対応する DOM サブセットが挿入または削除されるためです。DOM 操作が完了した後に jQuery プラグインの初期化を実行することが重要です。

function jobsCursor(){
  return Jobs.find();
}

Template.jobsList.onRendered(function(){
  this.autorun(function(){
    // registers a dependency on the number of documents returned by the cursor
    var jobsCount = jobsCursor().count();
    // this will log 0 at first, then after the jobs publication is ready
    // it will log the total number of documents published
    console.log(jobsCount);
    // initialize the plugin only when Blaze is done with DOM manipulation
    Tracker.afterFlush(function(){
      this.$(".collapsible").collapsible({
        accordion: false
      });
    }.bind(this));
  }.bind(this));
});

Template.jobsList.helpers({
  jobs:jobsCursor
});
于 2015-04-23T21:49:12.550 に答える