Question

我们有一个包含3个条目的列表（reactiveVar＆gt;数组）。默认情况下，将检查条目A.

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

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

检查B和C后，它看起来像这样：

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

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

看一下console-output，B1的checkbox-helper的返回值为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循环错误呈现输入复选框

1 个答案: