Я использую Backbonejs и Backgrid и хочу настроить прослушиватель событий внутри представления Backgrid, чтобы отслеживать события, инициированные в другом представлении. Событие вызовет функцию для снятия текущего флажка. Я использую базовую концепцию агрегатора событий из превосходного статья Дерика Бейли для передачи событий между представлениями.
Я застрял в двух моментах:
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.info("Box now checked");
} else {
// Enable all checkboxes again
$checkboxes.removeAttr("disabled");
isTickBoxSelected = false;
console.info("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
});





Я смог решить эту проблему, создав такой метод:
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");
}
Это не идеально, поскольку событие живет в представлении, содержащем сетку (родительское представление), а не в самой сетке. Однако он работает хорошо, а триггер и слушатель по-прежнему хорошо разделены благодаря агрегатору событий.
Я могу попытаться улучшить его, кэшируя селектор флажков при создании сетки и используя его для сброса всех флажков.