Meteor：如何使 Bootstrap Select 具有反应性？

Question

当使用 Bootstrap 多选时，我发现多选 jquery 总是有点过早触发 - 在模板完成从助手中提取数据之前，因此选择框通常是空的（我会说大约 60 % 的时间）。

显然 Template.usersLayout.rendered() 不是调用依赖于已呈现数据的函数的正确位置。有什么更好的方法来做到这一点？

另外，我猜让 bootstrap-select javascript 'reactive 将是一等奖。我该怎么做？

代码如下

===========

我正在使用帮助器 (#each) 创建一个选择框，其中每个选项都是它自己的数据上下文。

<template name="usersLayout">
    <form>
        <!-- Multiselect for instruments -->
        <div class="form-group">
            <label for="playerInstruments">Player instruments</label>
            <div class="controls text-left">
                <select id="playerInstruments" multiple="multiple" class="selectFilter" name="playerInstruments">
                    {{#each instruments}}
                    <option value="{{name}}">{{name}}</option>
                    {{/each}}
                </select>
            </div>
        </div>
    </form>
</template>

helper 定义如下：

Template.usersLayout.helpers({

    /* Database retrievals */

    // Returns all Instruments from Mongo
    instruments: function() {
        return Instruments.find();
    }

})

twitter 引导代码如下所示：

Template.usersLayout.rendered = function () {

    $('#playerInstruments').multiselect({
        disableIfEmpty: true,
        onChange: function(option, checked) {
            // Set the session as the checked valuess
            var tempSessionArr = $("#playerInstruments").val();
            // Add or delete from Session
            Session.set('playerInstruments', tempSessionArr);
        },
    });
}

Answer 1

问题是您的模板在开始渲染之前没有等待数据，由于数据仅在模板已经渲染后出现在页面上，因此选择框为空。我知道这是您的第一个应用程序，您没有删除 autopublish 包，但最好遵循 Flow Router 的完整教程

首先，阅读this。然后，将您的路由器更改为具有subcriptions 选项。之后，通过this（subsReady() 应该在rendered 函数内）检查订阅是否准备就绪，然后在subsReady() 的callback 中，初始化选择框

Answer 2

您想使用template events 来捕获更改事件，而不是设置 jQuery 挂钩。

Template.usersLayout.events({
  '#playerInstruments change': function(ev){
    var tempSessionArr = $("#playerInstruments").val();
    Session.set('playerInstruments', tempSessionArr);
  },
});

然后将您的multiselect 设置保留在onRendered 处理程序中：

Template.usersLayout.rendered = function () {
  $('#playerInstruments').multiselect({ disableIfEmpty: true });
};

如果这仍然不起作用，请尝试使用 defer 包装后者：

Template.usersLayout.rendered = function () {
  Meteor.defer(function(){
    $('#playerInstruments').multiselect({ disableIfEmpty: true });
  });
};