使用metor/blaze和#each循環錯誤地顯示輸入複選框

我們有一個包含3個條目（reactiveVar> array）的列表。默認情況下，條目A將被檢查。使用metor/blaze和#each循環錯誤地顯示輸入複選框

[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

來源

2017-06-19 Planetary Dev