Meteor 没有为每个添加一个新的插件元素答案

【问题标题】：Meteor not adding a new plugin element in a for eachMeteor 没有为每个添加一个新的插件元素
【发布时间】：2015-11-24 09:13:28
【问题描述】：

我有一张表，其中一列是 Bootstrap Switch 元素，稍后将用于打开或关闭该行的相应元素。

<tbody>

    {{#each sensorslist}}
        <tr>
            <td>{{name}}</td>
            <td>{{mac}}</td>
            <td>
                <input type="checkbox" class="on-off-checkbox" checked={{state}} />
            </td>
        </tr>
    {{/each}} 

</tbody>

但是，如果我对一行进行硬编码，一切都会很好，并且开关总是会出现。但是，当我如图所示从数据库中的传感器列表加载时，它仅显示当我通过链接转到该页面时（我使用的是 Iron Router）。如果我按 F5，它不会显示 Bootstrap 开关。

我没有使用自动发布。我正在订阅客户端中的传感器集合：

Sensors = new Mongo.Collection("sensors");
Meteor.subscribe('sensors');

为了加载数据，我使用了这个助手：

Template.sensores.helpers({

    'sensorslist': function(){ 
        return Sensors.find();
    }

});

并且还要渲染元素，我将其作为渲染函数：

Template.sensores.rendered = function (){

    $('.on-off-checkbox').bootstrapSwitch({
        'offColor': 'danger'
    });

};

正如我所说，如果我只使用菜单在 web 应用程序中移动，它可以正常工作，如果我使用 F5 刷新页面或简单地使用直接链接转到该页面，它将无法正常工作。

我注意到，如果我使用 setTimeout 在渲染中执行该代码，并添加足够的时间，它将始终有效，所以我想我错过了一些东西......

非常感谢您！

【问题讨论】：

标签： javascript jquery twitter-bootstrap meteor twitter-bootstrap-3

【解决方案1】：

我以前遇到过和你一样的问题。
据我所知，当Template.sensores 被渲染时，数据上下文sensorslist 没有完全加载，所以我们无法查询sensorslist 块下的DOM。
但是当你使用setTimeout 足够长的时间时，它会在sensorslist 下的DOM 完全渲染。

我的解决方案是另外使用另一个模板：

template(name='sensores')
  ...
  <tbody>
    {{#each sensorslist}}
      {{> sensorsList}}
    {{/each}} 
  </tbody>
  ...

template(name='sensorsList')
  <tr>
    <td>{{name}}</td>
    <td>{{mac}}</td>
    <td>
      <input type="checkbox" class="on-off-checkbox" checked={{state}} />
    </td>
  </tr>

Bootstrap Switch 放置在sensorsList模板的渲染函数中。
由于这个模板将被渲染的次数与数据上下文sensorslist 的长度一样多，所以我们想要操作的每个 DOM 都应该在其自己的模板实例中进行作用域。

Template.sensorsList.rendered = function () {
  this.$('.on-off-checkbox').bootstrapSwitch({
    'offColor': 'danger'
  });
};

【讨论】：