在 Meteor 中检查了错误的复选框

Question

我对 Meteor 和 Blaze 有一个奇怪的问题。

我有一个客人名单，名字显示在表格中。第一个单元格有一个复选框，用于在记录上设置arrived 标志。然后布局过滤名称，以免显示到达​​的客人。

由于某种原因，在选中复选框时，它将在该记录上执行正确的操作（更改标志并隐藏行），但也将检查下一个名字的复选框而不会影响该记录。

这是我点击最上面的记录之前的样子：

点击最上面的记录后：

以下是相关代码：

客户端/Names.js：

Template.Names.helpers({
    names(){
        let listId = FlowRouter.getParam("listId");
        var list = Lists.findOne({_id: listId});
        return Lists.findOne({_id: listId}).names;
    }
});

Template.Names.events({ 
    names(){
        const instance = Template.instance();

        let listId = FlowRouter.getParam("listId");
        var filter = Session.get('filterQuery');
        var list = Lists.findOne({_id: listId});
        var showArrivedGuests = instance.state.get('showArrivedGuests');

        if(filter !== "" || !showArrivedGuests){            
            var pattern = stringToTerms(filter);
            var regex = new RegExp(pattern, 'i');

            // Filter results by search terms
            list.names = _.filter(list.names, function(name){
                if(!showArrivedGuests && name.arrived) return false;
                return (regex.test(name.firstName.tokenize()) || regex.test(name.lastName.tokenize()));
            });
        }

        let names = _.sortBy(list.names, Session.get('sortNames').term);
        return Session.get('sortNames').descending ? names : names.reverse();
    },
});

模板：

{{#each names}}
    <tr class="{{#if arrived}}arrivedChecked{{/if}}">
        <td class="arrived">
            <input type="checkbox" class="arrivedChecker" checked="{{arrived}}" id="name{{id}}" />
        </td>
        <td class="f_name">{{firstName}}</td>
        <td class="l_name">{{lastName}}</td>
        <td class="plus">{{plus}}</td>
        <td class="actions">
            <a class="delete alert"><i class="fa fa-times"></i></a>
        </td>
    </tr>
{{/each}}

Here's a link to the app if anyone would like to play around。我不想经历删除用户帐户验证的麻烦，所以您必须创建一个帐户，列出一个列表，然后手动添加名称。

编辑：

在模板中，arrived 是每个名称对象中的布尔值。

我将每个名称存储在嵌套在 Lists 对象中的数组中，这也意味着我手动为名称生成 id。

当我最初发布时，我不想用我的所有代码发布一个巨大的帖子，所以我只发布了我认为相关的内容。不过我决定把它放在 GitHub 上，所以here's the link。

编辑 2：

我刚刚注意到我的删除按钮正在执行类似的操作，当单击它并删除记录时，以下删除按钮停止工作。

在检查器中检查，看起来复选框和删除按钮在重新渲染时实际上并没有消失，即使模板应该清楚地排除它们。当我选中和取消选中“显示到达的客人”框时，它们会消失，但由于某种原因不会对用户输入做出反应。

可能与附加事件有关吗？即使在这些元素被重新渲染出页面后，事件侦听器是否继续存在于这些元素上？如果是这样，我应该听桌子上的点击事件并依靠冒泡来找出来源吗？

Answer 1

我认为问题在于您应用检查值的方式。

<input type="checkbox" class="arrivedChecker" {{checkArrived}} id="name{{id}}" />

助手：

checkArrived: function() {
   var check = this.arrived;
   return check ? "checked" : "";
}

来源：here