javascript - Meteor 没有在 foreach 中添加新的插件元素

Question

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

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

};

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

我注意到，如果我使用 setTimeout 在渲染中执行该代码，并添加足够的时间，它总是会起作用，所以我想我错过了一些东西......

提前非常感谢您!

Answer 1

我以前遇到过和你一样的问题。
据我所知，当渲染 Template.sensores 时，数据上下文 sensorslist 未完全加载，因此我们无法查询 sensorslist 下的 DOM block 。
但是，当您使用 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'
  });
};