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元素。

解决此问题的方法是定义一个单独的函数来返回要迭代的光标，并在模板的autorun回调内的onRendered内观察此光标。 / p>

当我们检测到光标计数被修改时，表示已添加文档（特别是当订阅准备好并且初始文档集进入客户端时）或已删除，我们必须重新运行jQuery插件初始化。

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

那是因为返回光标的助手也是一个计算，当添加或删除文档时会无效，因此插入或删除相应的DOM子集：然后执行我们的jQuery插件初始化是至关重要的。完成DOM操作。

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：可折叠为每个都不起作用

1 个答案: