Question

我有一个表，其中一列是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 Switch。

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

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

};

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

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

非常感谢你！

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

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

1 个答案: