使用 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

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

我做了一个小的 repo 来重现这个问题。请看一看 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 的复选框助手的 return 值为 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

Answer 1

问题是您的 tempChecked 数组没有反应，所以助手没有更新。我建议您将 checked 状态保留在 todos reactiveVar 中（更简单更清洁）或使 tempChecked 本身具有反应性。

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

Wrong rendering of input checkbox using metor/blaze and #each loop

rendering

meteor

meteor-blaze