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

Question

当使用 Bootstrap multiselect 时，我发现 multiselect jquery 总是有点过早触发 - 在模板完成从中提取数据之前帮助者，因此 select 箱子经常是空的（我会说大约 60% 的时间）。

显然 Template.usersLayout.rendered() 不是调用依赖数据呈现的函数的正确位置。执行此操作的更好方法是什么？

或者，我想做出 bootstrap-select javascript 反应将是一等奖。我该怎么做？

代码如下

==========

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

<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>

助手定义如下：

Template.usersLayout.helpers({

    /* Database retrievals */

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

})

twitter bootstrap 代码全都像下面这样：

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

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

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

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

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

如果这仍然不起作用，请尝试用 defer:

包装后者

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

Answer 2

问题是您的模板在开始呈现之前没有等待数据，因为数据仅在模板呈现后才出现在页面上，select 框是空的。我知道这是您的第一个应用程序，您没有删除 autopublish 包，但最好遵循 Flow Router

的完整教程

首先，读取this. Then, change your router to have the subcriptions options. After that, check if the subscriptions are ready through this（subsReady()应该在rendered函数中）然后，在subsReady()的callback中, 初始化 selectbox

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

Meteor: How to make Bootstrap Select reactive?

twitter-bootstrap

meteor

bootstrap-select