Question

我正在使用bootstrap-select来帮助我的Meteor应用程序中的选择元素看起来更好。

但是，我遇到了一个问题，即在提交Meteor Collection的更改后，反应性会将更改推回到模板，从而重写select元素并销毁原始的select元素，这也会带走{{1东西。

我想知道我是否有办法阻止这种情况以某种方式发生。我尝试听取更改并在更新时调用bootstrap-select但它不起作用。

selectpicker

我甚至试图推迟一些事情，也无济于事。

Applications.find().observe({
changed: function() {
    console.log('something changed');
            $('.selectpicker').selectpicker();
}
});

之前是否有人遇到此问题并知道如何修复它？

编辑：这是模板代码

Applications.find().observe({
changed: function() {
    console.log('something changed');
    setTimeout(function(){
        $('.selectpicker').selectpicker();
        console.log('trying to update select picker');
    }, 1000);
}
});

Answer 1

在HTML模板中，如果用the constant block helper包围select元素，则不会重新呈现常量块内的部分。也许那会是一个解决方案吗？

Answer 2

我有同样的问题。事实证明从我的Meteor应用程序中删除'preserve-inputs'包有帮助。也许值得一试？或者，如果您不想这样做，那么从您的select元素中取出id和/或name属性似乎也会产生相同的影响。

Answer 3

自从提出这个问题以来，事情发生了一些变化。使用新的Blaze渲染引擎，渲染的事件只会被抛出一次。在渲染时，选项不可用，导致样式很好但空的选择。

以下示例负责这些更改。诀窍是在启动时渲染一次selectpicker，然后在对选项进行更改时刷新。因此，必须将<option>移动到它自己的模板块。

模板：

<template name="whatever">
<div class="form-group">
    <label for="college" class="control-label">College/ University</label>
    <select class="selectpicker" name="college" placeholder="Select a College/ University">
        {{#each colleges}}
            {{> selectOption}}
        {{/each}}
  </select>
</div>
</template>

<template name="selectOption">
    <option value="{{slug}}">{{name}}</option>
</template>

JavaScript的：

Template.whatever.rendered = function(){
  $('.selectpicker').selectpicker();
};

var renderTimeout = false;
Template.selectOption.rendered = function(){
  if(renderTimeout !== false) {
    Meteor.clearTimeout(renderTimeout);
  }
  renderTimeout = Meteor.setTimeout(function() {
    $('.selectpicker').selectpicker("refresh");
    renderTimeout = false;
  }, 10)
};

刷新有点棘手。当您将集合加载到选择中时，将为每个选项抛出事件。在我的情况下，我有数百个文件/选项。这导致刷新数百次，浏览器挂起几秒钟。因此，存在这种小的超时，它只需要为大量更改进行一次刷新。

Meteor on collection更新更新模板选择元素

3 个答案: