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

这不是完美的，因为该事件存在于托管网格的视图（父视图）中，而不是驻留在网格本身中。但是，由于事件聚合器，它可以很好地工作，并且触发器和侦听器仍然可以很好地分离。

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

将事件传递到Backgrid视图

1 个答案: