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

在Meteor中检查错误的复选框

编辑：

编辑2：

1 个答案: