Передача событий в представление Backgrid - PullRequest
Новая
       27

Передача событий в представление Backgrid

0 голосов
/ 21 ноября 2018

Я использую Backbonejs и Backgrid и хотел бы настроить прослушиватель событий в представлении Backgrid, чтобы перехватывать события, инициируемые в другом представлении.Событие будет вызывать функцию для очистки установленного флажка.Я использую базовую концепцию агрегатора событий из превосходной статьи Дерика Бэйли о передаче событий между представлениями.

Я застрял в двух моментах:

1) Успешная передача событияв представлении Backgrid.
2) Определение того, какой флажок установлен для его очистки.

Код столбца My 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
        });

1 Ответ

0 голосов
/ 22 ноября 2018

Я смог решить эту проблему, создав метод, подобный следующему: 

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

Это не идеально, поскольку событие живет в представлении, в котором размещена сетка (родительское представление), а не в сетке.сам.Тем не менее, он работает хорошо, и триггер и слушатель по-прежнему хорошо отделены благодаря агрегатору событий.

Я могу попытаться улучшить его, кэшируя селектор флажка при создании сетки и используя его для сброса всех флажков.

...