Meteor + Materialise:每个都无法折叠 [英] Meteor + Materialize: collapsable in for each doesn't work

问题描述

我有一个可折叠(具体化)，其元素是从 for each 创建的，但是下拉"不起作用.for each 中没有的所有东西都可以工作.

I have a collapsable (materialize) whose elements are created from a for each, however the "dropdown" doesn't work. Everything that isn't in the for each works.

我该如何解决这个问题?

How can I fix this problem?

jobList.html

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}}.

The template jobList is in another template that does nothing appart from having {{> jobList}}.

推荐答案

这个问题与 DOM 就绪有关，在你执行 jQuery 插件初始化时，{{#each}} 循环尚未呈现 HTML 元素.

This problem is relative to DOM readiness, at the time you're executing the jQuery plugin initialization, the {{#each}} loop has not yet rendered HTML elements.

你可以做的来解决这个问题是定义一个单独的函数来返回你想要迭代的游标，并在 onRendered 中的 autorun 中观察这个游标模板回调.

What you can do to solve this problem is defining a separate function to return the cursor you want to iterate over, and observe this cursor inside an autorun inside the onRendered callback of your template.

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

When we detect the cursor count is modified, it means a document has been added (in particular when the subscription is ready and the initial set of documents made their way to the client) or removed, and we have to re-run the jQuery plugin initialization.

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

It's important to wait for every other current invalidated computations to finish before running the jQuery initialization, this is why we need to use Tracker.afterFlush (we can't predict in which order invalidated computations are re-run, we can only execute code after this process is done).

那是因为返回我们光标的助手也是一个计算，并且会在添加或删除文档时失效，从而插入或删除相应的 DOM 子集:在 DOM 操作完成后执行我们的 jQuery 插件初始化至关重要.

That's because the helper returning our cursor is a computation too and will be invalidated when a document is added or removed, thus inserting or removing the corresponding DOM subset : it is then vital to execute our jQuery plugin initialization after DOM manipulation is done.

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 + Materialise:每个都无法折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！