2

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

但是，我遇到了一个问题，即在向 Meteor Collection 提交更改时，反应性会将更改推回模板，从而重写选择元素并破坏原始选择元素，这也会带走这些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);
}
});

有没有人遇到过这个问题并且知道如何解决它？

编辑：这是模板代码

<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}}
            <option value="{{slug}}">{{name}}</option>
        {{/each}}
    </select>
</div>
4

3 回答 3

1

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

于 2013-10-22T05:32:21.033 回答
1

在你的 HTML 模板中，如果你用常量块助手包围你的选择元素，常量块内的部分将不会被重新渲染。也许这将是一个解决方案？

于 2013-08-10T07:51:36.053 回答
1

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

以下示例负责这些更改。诀窍是在启动时渲染一次选择器，然后在选项发生更改时刷新。因此，<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)
};

刷新有点棘手。当您将集合加载到选择中时，将为每个选项引发事件。就我而言，我有数百个文档/选项。这导致刷新数百次，浏览器挂起几秒钟。因此有这个小超时，它只负责刷新一次以进行大量更改。

于 2014-04-30T12:15:54.280 回答