流星+物化：每个可折叠不起作用

Question

我有一个可折叠的(物化)，其元素是从for each创建的，但是"下拉列表"不起作用。所有不在for each的东西都有效。

如何解决此问题？

工作列表.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>

工作列表.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
});