为什么本地集合的反应性会扰乱我的 UI？

Question

我在父模板中有这个：

{{#each oddsReactive in bet.oddsChecked}}
  {{>InputOdds arrayKey='oddsChecked' arrayIndex=@index}}
{{/each}}

帮助者"bet"提供了这个数据：

bet: () => ChecksCollection.findOne()

其中：

ChecksCollection = new Mongo.Collection(null);
ChecksCollection.insert({
  oddsChecked: ['', ''],
  oddsAverages: ['', ''],
  oddsCompeting: ['', '']
});

我需要 "bet" 保持反应，因为可以从父模板向数组添加元素。

当我从子模板 (InputOdds) 编辑文本框时，每次 'keyup' 后焦点都会丢失。同样在第一次编辑时，它将我设法从第一个子模板的文本框写入的内容复制到第二个子模板的文本框。为什么？为什么本地集合的反应性搞乱了我的 UI？

Template.InputOdds.events({
  'keyup input.form-control': function (event, template) {
    template.currentOdds.set(event.target.value);

    var objectForSet = {};
    objectForSet[template.data.arrayKey + '.' + template.data.arrayIndex] = event.target.value;
    ChecksCollection.update({}, {$set: objectForSet})

正如您可能猜到的那样，如果我注释掉最后一行，UI 就不会再乱七八糟了。请帮我解决这个问题，不要在最后几行推荐 _.debounce 或 Meteor.setTimeout，因为它们只是推迟 UI 的混乱...我希望有即时反应。

可能没有必要，但这是子模板的 html：

<template name="InputOdds">
  <div class="form-group">
    <label for="{{arrayKey}}{{arrayIndex}}">{{label}}</label>
    <div class="input-group">
      <input type="text" class="form-control" id="{{arrayKey}}{{arrayIndex}}" value="{{odds}}"
             placeholder="{{placeholder}}">
                    <span class="input-group-addon">
                      {{#if equals isValidOddsFormat 'yes'}}
                        <span style="color:green" class="glyphicon glyphicon-ok"></span>
                      {{/if}}
                      {{#if equals isValidOddsFormat 'no'}}
                        <span style="color:red" class="glyphicon glyphicon-remove"></span>
                      {{/if}}
                    </span>
    </div>
  </div>
</template>

Answer 1

这是 Meteor's Blaze 中的一个错误：https://github.com/meteor/meteor/issues/6111

如果有人能想到解决方法，请克隆 git，尝试找到它并告诉我！

为什么本地集合的反应性会扰乱我的 UI？

Why is the reactivity of a local collection messing up my UI?

meteor

meteor-blaze

meteor-collection2

meteor-collections