javascript - meteor 没有在每个中添加新的插件元素

我有一个表，其中的列之一是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在呈现的代码中执行该代码，并添加足够的时间，它将始终有效，因此我想我缺少了一些东西...

提前非常感谢您！

最佳答案

我遇到过与您以前相同的问题。
据我所知，当呈现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>

引导开关位于sensorsList模板的呈现功能中。
由于此模板的渲染次数是数据上下文sensorslist长度的多少倍，因此，我们要操作的每个DOM都应在其自己的模板实例范围内。

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