Question

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

显然，Template.usersLayout.rendered（）不是调用依赖于数据渲染的函数的正确位置。有什么更好的方法呢？

或者，我想让bootstrap-select javascript'被动将获得一等奖。我怎么能这样做？

代码在

之下

==========

我正在使用帮助器（#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>

助手的定义如下：

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

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

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

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

流星：如何使Bootstrap选择反应？

2 个答案: