Meteor 使用metor/blaze和#each循环错误呈现输入复选框

我们有一个包含3个条目的列表（reactiveVar>array）。默认情况下，将选中条目A

[X] Test A
[ ] Test B
[ ] Test C

现在检查所有其他条目B和C

在检查B和C之后，它看起来是这样的：

[X] Test A
[X] Test B
[X] Test C

现在，我们通过单击“添加B1”按钮，在B和C之间添加一个新的默认todo B1。 通常这是由其他用户完成的，我们使用mongo集合作为默认TODO。 简单地说，我们使用的是一个reactiveVar，它会产生相同的问题

好的，添加B1后，预期结果应该是：

[X] Test A
[X] Test B
[ ] Test B1
[X] Test C

但是也检查了条目B1！！？？？？我不知道为什么，我怎样才能解决这个问题

[X] Test A
[X] Test B
[X] Test B1
[X] Test C

我做了一个小回购来重现这个问题。请看一看

下面是模板和帮助器函数：

<template name="todos">
    <h2>Learn Meteor!</h2>
    <ul>
        {{#each todo in hTodos}}
            <li>
                <input type="checkbox" class="action-check" data-id="{{todo.id}}" checked={{hChecked todo.id}}>&nbsp;{{todo.description}}
            </li>
        {{/each}}
    </ul>
    <button class="add-todo">add B1</button>
</template>



import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

let tempChecked = {
    A: true
}

Template.todos.onCreated(function() {
  this.todos = new ReactiveVar([
      {id:'A', description:'Test A'},
      {id:'B', description:'Test B'},
      {id:'C', description:'Test C'}
  ]);
});

Template.todos.helpers({
  hChecked(id){
      var isChecked = (tempChecked[id] === true);
      console.log('isChecked:', id, isChecked);
      return isChecked;
  },

  hTodos(){
      return Template.instance().todos.get();
  }
});

Template.todos.events({
    'click .action-check': function(event, instance){
        var checked = $(event.target).is(':checked');
        var id = $(event.target).attr('data-id');
        console.log(id, checked);
        tempChecked[id] = checked;
    },

    'click .add-todo'(event, instance) {
        // add todo B1 between B and C
        instance.todos.set([
            {id:'A', description:'Test A'},
            {id:'B', description:'Test B'},
            {id:'B1', description:'Test B1'},
            {id:'C', description:'Test C'}
        ]);
    },
});

学习流星！

{{{#在hTodos中每个todo}

{{todo.description}}

{{/每个}}

添加B1
从“meteor/Templateing”导入{Template}；
从“meteor/ReactiveVar”导入{ReactiveVar}；
导入“/main.html”；
让tempChecked={
A:是的
}
Template.todos.onCreated（函数（）{
this.todos=new ReactiveVar([
{id:'A'，description:'Test A'}，
{id:'B'，description:'Test B'}，
{id:'C'，描述：'Test C'}
]);
});
Template.todos.helpers({
检查（id）{
var isChecked=（tempChecked[id]==true）；
log（'isChecked:'，id，isChecked）；
返回检查；
},
hTodos（）{
返回Template.instance（）.todos.get（）；
}
});
Template.todos.events({
“单击.操作检查”：函数（事件、实例）{
var checked=$（event.target）.is（':checked'）；
var id=$（event.target）.attr（'data-id'）；
控制台日志（id，选中）；
tempChecked[id]=已检查；
},
“单击。添加todo”（事件，实例）{
//在B和C之间添加todo B1
instance.todos.set([
{id:'A'，description:'Test A'}，
{id:'B'，description:'Test B'}，
{id:'B1'，描述：'Test B1'}，
{id:'C'，描述：'Test C'}
]);
},
});

查看控制台输出，B1的复选框帮助器的返回值为false

isChecked: A true       <<-- By default A is checked
isChecked: B false
isChecked: C false
B true                  <<-- checking B
C true                  <<-- checking C

isChecked: C true       <<-- Click Button "add B1"
isChecked: A true
isChecked: B true
isChecked: B1 false     <<--- BUT, on the website the checkbox is checked

---

isChecked:A true问题是您的
tempChecked
数组没有反应，因此助手没有更新。我建议您在
TODO中保持
选中状态
reactiveVar（更简单、更干净）或使
tempChecked
自身处于反应状态。
谢谢，我使tempChecked对象处于反应状态，它可以工作。但我不明白为什么，因为每个输入都会调用helper（hChecked），并根据用户检查与否返回true或false。这与blaze如何更新反应性内容有关。您可以在调试器中跟踪它以更好地理解它。如果答案对您有效，则自定义为接受答案：）欢迎使用SO。Blaze仅在帮助程序中使用的被动数据源发生更改时才重新运行帮助程序。如果不使用反应数据源，则不会重新运行帮助程序。@Mitar Yes，这很清楚，我理解帮助程序只会通过更改我的反应数据源来重新运行。事实上，我正在为generell todo列表使用一个反应式数据源，每个条目都会调用helper并返回true或false。添加新项目B1后，助手将重新运行所有项目。在本例中为4次，因为对于新项目B1，我们有4项。B1的检查状态将返回false，但呈现为checked。我认为这将是一个问题-(