流星+物化：可折叠的每个都不起作用 [英] Meteor + Materialize: collapsable in for each doesn't work

问题描述

我有一个可折叠的（物化），其元素是从为每个创建的，但是下拉不起作用。所有不在中的每个都适用。

我该如何解决这个问题？

jobList.html

 < template name =jobList> 
< ul class =collapsibledata-collapsible =accordion> 
 {{＃每个工作}} 
< 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（{
手风琴：假
}）; 
}; 
 
 Template.jobList.helpers（{
 jobs：function（）{
 return Jobs.find（）; 
} 
}）; 
  

模板 jobList 位于另一个模板中从 {{>这个问题是相对于DOM准备情况而言的，当时你就是这个问题的解决方案。执行jQuery插件初始化， {{＃each}} 循环还没有呈现HTML元素。

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

当我们检测到光标计数被修改时，意味着文档已被添加（特别是当订阅已准备好并且最初的一组文档已经到达客户端）或者被删除，我们必须重新运行jQuery插件初始化。

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

这是因为帮助器返回我们的游标也是一种计算，并且将会是添加或删除文档时会失效，从而插入或删除相应的DOM子集：在完成DOM操作后执行jQuery插件初始化至关重要。

p> 函数jobsCursor（）{
return Jobs.find（）;
}

Template.jobsList.onRendered（function（）{
this.autorun（function（）{
//注册依赖于返回文档的数量通过游标
var jobsCount = jobsCursor（）。count（）;
//这将首先记录0，然后在作业发布准备就绪后
//它将记录总数发布的文档
console.log（jobsCount）;
//仅当Blaze完成DOM操作时才初始化插件
Tracker.afterFlush（function（）{
this。$ （.collapsible）。collapsible（{
accordion：false
}）;
} .bind（this））;
} .bind（this））;
}）;

Template.jobsList.helpers（{
jobs：jobsCursor
}）;


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

<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();
    }
});

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

解决方案

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.

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.

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.

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

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
});

这篇关于流星+物化：可折叠的每个都不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！