我有一个可折叠(物化)元素是从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}}
之外什么都不做。
最佳答案
此问题与 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
});
关于javascript - meteor +物质化: collapsable in for each doesn't work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29832371/