javascript - meteor +物质化: collapsable in for each doesn't work

Question

我有一个可折叠(物化)元素是从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}} 之外什么都不做。

Answer 1

此问题与 DOM 就绪有关，在您执行 jQuery 插件初始化时，{{#each}} 循环尚未呈现 HTML 元素。

要解决此问题，您可以定义一个单独的函数来返回要迭代的光标，并在 onRendered 内的 autorun 内观察此光标模板的回调。

当我们检测到游标计数被修改时，这意味着一个文档已被添加(特别是当订阅准备就绪并且初始文档集已到达客户端时)或被删除，我们必须重新运行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
});