使用metor/blaze和#each循环错误地显示输入复选框

Question

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

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

现在检查的所有其他项目B和C.

检查B和C，它看起来像在此之后：

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

现在我们添加B和C之间的新的默认待办事项B1通过点击“添加B1”按钮。 通常这是由其他用户完成的，我们使用mongo集合作为默认todos。 为了简单起见，我们使用了一个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 

我做了一个小回购重现问题。请看看 https://github.com/planetarydev/test-each-checkbox.git

，这里是模板和辅助功能：

<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'} 
     ]); 
    }, 
}); 

看一看控制台输出的复选框辅助对B1的返回值是假的。

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 

Answer 1

的问题是，你的tempChecked阵列是不是反应如此助手没有更新。我建议你保持checked状态在你的todosreactiveVar（更简单和更清洁）或使tempChecked本身反应。