将事件传递到背景网格视图

Question

我正在使用 Backbonejs 和 Backgrid，并且想在 Backgrid 视图中设置一个事件侦听器以捕获在另一个视图中触发的事件。该事件将调用一个函数来清除当前选中的复选框。我正在使用 Derick Bailey 的优秀文章 article 中关于在视图之间传递事件的基本事件聚合器概念。

我卡在了两点：

1) 成功将事件传递到 Backgrid 视图中。
2) 确定选中哪个复选框以将其清除。

我的Backgrid专栏代码如下：

window.ShowCollectionView = Backbone.View.extend({
    template: _.template($('#CollectionTemplate3').html()),

    initialize: function(options) {
        var isTickBoxSelected = false;

        // Tie the method uncheckTickBox() to the view and not the aggregator.
        _.bindAll(this, "uncheckTickBox");
        options.vent.bind("uncheckTickBox", this.uncheckTickBox);

        var columns = [
        {
            name: '',
            label: 'Select',
            cell: Backgrid.BooleanCell.extend({
                events : {
                    'change': function(ev){
                        var $checkbox = $(ev.target);

                        var $checkboxes = $('.backgrid input[type=checkbox]');

                        if($checkbox.is(':checked')) {
                            $checkboxes.attr("disabled", true);
                            isTickBoxSelected = true;

                            // Disable all checkboxes but this one
                            $checkbox.removeAttr("disabled");
                            console.log("Box now checked");
                        } else {
                            // Enable all checkboxes again
                            $checkboxes.removeAttr("disabled");
                            isTickBoxSelected = false;
                            console.log("Box now UNchecked");
                        }
                    }
                }
            })
        }, {
            name: "id", // The key of the model attribute
            label: "ID", // The name to display in the header
            editable: false, // By default every cell in a column is editable
            cell: "string"
        }, {
            name: "last_name",
            label: "Surname",
            editable: false, // Display only!
            cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
        }];

        <more code here>

        // Set up a grid view to use the pageable collection
        var userGrid = new Backgrid.Grid({
            vent: vent,
            columns: columns,
            collection: userCollection
        });

Answer 1

我能够通过创建如下方法解决此问题：

uncheckTickBox: function(){
        var $allcheckboxes = $('.backgrid input[type=checkbox]');
        var $tickedcheckbox = $('.backgrid input[type=checkbox]:checked');

        // Uncheck ticked box
        $tickedcheckbox.prop("checked", false);
        // Enable all checkboxes again
        $allcheckboxes.removeAttr("disabled");
}

它并不完美，因为事件存在于托管网格的视图（父视图）中，而不是网格本身。但是，由于事件聚合器，它运行良好并且触发器和侦听器仍然很好地解耦。

我可能会尝试通过在创建网格时缓存复选框选择器并使用它来重置所有复选框来改进它。

将事件传递到背景网格视图

Passing events into a Backgrid view

event-handling

backbone.js

backgrid