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

【问题标题】：Why is the reactivity of a local collection messing up my UI?为什么本地集合的反应性会弄乱我的 UI？
【发布时间】：2016-01-28 01:42:00
【问题描述】：

我在父模板中有这个：

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

助手“赌注”提供此数据：

bet: () => ChecksCollection.findOne()

地点：

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

我需要“打赌”来保持反应，因为可以从父模板向数组添加元素。

当我从子模板 (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>

【问题讨论】：

标签： meteor meteor-blaze meteor-collection2 meteor-collections

【解决方案1】：

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

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

【讨论】：