将事件传递到Backgrid视图

Question

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

我被困在两点上：

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");
}

它并不完美，因为事件存在于承载网格的视图中(父视图)，而不是网格本身。但是，它工作得很好，由于事件聚合器的作用，触发器和监听器仍然很好地解耦。

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