Meteor + Materialize：可折叠的每个都不起作用

Question

我有一个可折叠（实现），其元素是从 for each 创建的，但是 "dropdown" 不起作用。 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 元素.

解决这个问题的方法是为return要迭代的光标定义一个单独的函数，并在onRendered内的autorun内观察这个光标模板的回调。

当我们检测到游标计数被修改时，这意味着文档已被添加（特别是当订阅准备就绪并且初始文档集已到达客户端时）或被删除，我们必须重新-运行 jQuery 插件初始化。

在运行初始化 jQuery 之前等待所有其他当前无效计算完成是很重要的，这就是我们需要使用 Tracker.afterFlush 的原因（我们无法预测无效计算的顺序是重新运行，我们只能在此过程完成后执行代码。

那是因为return我们的游标助手也是一个计算，当添加或删除文档时会失效，因此插入或删除相应的 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
});

Meteor + Materialize：可折叠的每个都不起作用

Meteor + Materialize: collapsable in for each doesn't work

html

javascript

collapsable

materialize

meteor