我在父模板中有这个:
{{#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>