backgrid.js - как предотвратить многорядный выбор?

#backbone.js-collections #backgrid

#backbone.js-коллекции #backgrid

Вопрос:

Я новичок в backgrid и использую его в форме, позволяющей пользователю выбирать строку (с помощью флажка), а затем нажимать «Отправить». Я не могу понять, как настроить мою сетку так, чтобы она вела себя как «переключатели», в которых можно выбрать только одну строку. Это то, что изначально поддерживает backgrid, или мне нужно написать обработчик для «отмены выбора» ранее выбранных строк?

1. Я вижу, как настроить обработчик событий для перехвата выбранной строки wellCollection.on('backgrid:selected', function(model, selected) { alert('A Backgrid row was selected! ' model.attributes.api ' : ' selected); }); , которая работает хорошо. Тем не менее, я хотел бы перебрать все строки и, если какие-либо другие строки «выбраны», предотвратить дополнительный выбор. Мой JavaScript недостаточно зрелый, чтобы прочитать исходный код Backgrid и разобраться в этом.

Ответ №1:

Вот быстрый и грязный метод:

         wellCollection.on('backgrid:selected', function(model, selected) {
            if (wellGrid.getSelectedModels().length > 1) {
                model.trigger("backgrid:select", model, false);
                alert('Only one selection is allowed.');
            }
        });

Недостатком является то, что этот подход требует использования «selectAll», что действительно противоречит интуиции пользователя. Я бы предпочел иметь возможность не использовать «selectAll», но это необходимо для заполнения объекта getSelectedModels.

Ответ №2:

Вы можете создать пользовательскую ячейку, которая отображает переключатели. Приведенная ниже реализация может потребовать дополнительной работы, но что-то вроде этого поможет вам начать:

 var RadioCell = Backgrid.Cell.extend({
    events: {
        "click .selectedRadio": "makeSelected"
    },
    render: function () {
        this.template = Mustache.to_html($("#radioCell").html(), this.model.toJSON());
        this.$el.html(this.template);
        this.delegateEvents();
        return this;
    },
    makeSelected: function () {
        // set all to inactive
        this.model.collection.invoke('set', { "SomeModelAttrib": false });
        // check if radio is checked and set the value on the model
        var radioValue = $("input[name='someSelection']").is(":checked");
        this.model.set("SomeModelAttrib", radioValue);
    }
});

и шаблон усов:

 <script type="text/template" id="radioCell">
<input type='radio' class='selectedRadio' name='someSelection' value="{{SomeModelAttrib}}" {{#SomeModelAttrib}}checked{{/SomeModelAttrib}}>
</script>