3

我有一个可折叠（物化），其元素是从 a 创建的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}}.

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 回答