Délégation d'événements pour un parent de la vue de la colonne vertébrale

Ici sont un couple de possibilités.

1. Centralisé: magasin ClosedTune objets dans le TuneBook instance

1. Stocker une référence à chaque ClosedTune dans tune_book.tunes. Comment vous remplir tune_book.tunes est à vous; puisque vous avez mentionné un additionneur méthode sur TuneBook, c'est ce que j'ai illustré ci-dessous.

2. Dans le TuneBook gestionnaire d'événements, de récupérer la ClosedTune de tune_book.tunes en utilisant quelque chose comme la id attribut de la cible de l'événement comme la clé. Ensuite, appelez le Tune ou ClosedTune gestionnaire.

http://jsfiddle.net/p5QMT/1/

var Tune = Backbone.View.extend({
className: "tune",
click_handler: function (event) {
event.preventDefault();
console.log(this.id + " clicked");
},
render: function () {
this.$el.html(
'<a href="" class="button">' + this.id + '</a>'
);
return this;
}
});
var ClosedTune = Tune.extend({});
var OpenTune = Tune.extend({
events: {
"click .button" : 'click_handler'
}
});
var TuneBook = Backbone.View.extend({
events: {
"click .tune .button" : 'click_handler'
},
click_handler: function (event) {
var tune = this.options.tunes[
$(event.target).closest(".tune").attr('id')
];
tune.click_handler( event );
},
add_tune: function (tune) {
this.options.tunes[tune.id] = tune;
this.$el.append(tune.render().el);
},
render: function () {
$("body").append(this.el);
return this;
}
});
var tune_book = new TuneBook({
tunes: {}
});
[1, 2, 3].forEach(function (number) {
tune_book.add_tune(new ClosedTune({
id: "closed-tune-" + number
}));
});
tune_book.render();
var open_tune = new OpenTune({
id: "open-tune-1"
});
$("body").append(open_tune.render().el);

2. Décentralisée: associer le point de vue de l'objet avec l'objet DOM à l'aide de jQuery.data()

1. Lorsque vous créez un ClosedTune, magasin de référence, par exemple this.$el.data('view_object', this).

2. Dans l'écouteur d'événement, de récupérer la ClosedTune, par exemple $(event.target).data('view_object').

Vous pouvez utiliser exactement le même gestionnaire pour ClosedTune (en TuneBook) et OpenTune, si vous le souhaitez.

http://jsfiddle.net/jQZNF/1/

var Tune = Backbone.View.extend({
className: "tune",
initialize: function (options) {
this.$el.data('view_object', this);
},
click_handler: function (event) {
event.preventDefault();
var tune =
$(event.target).closest(".tune").data('view_object');
console.log(tune.id + " clicked");
},
render: function () {
this.$el.html(
'<a href="" class="button">' + this.id + '</a>'
);
return this;
}
});
var ClosedTune = Tune.extend({
initialize: function (options) {
this.constructor.__super__.initialize.call(this, options);
}
});
var OpenTune = Tune.extend({
events: {
"click .button" : 'click_handler'
}
});
var TuneBook = Backbone.View.extend({
events: {
"click .tune .button": Tune.prototype.click_handler
},
add_tune: function (tune) {
this.$el.append(tune.render().el);
},
render: function () {
$("body").append(this.el);
return this;
}
});
var tune_book = new TuneBook({
tunes: {}
});
[1, 2, 3].forEach(function (number) {
tune_book.add_tune(new ClosedTune({
id: "closed-tune-" + number
}));
});
tune_book.render();
var open_tune = new OpenTune({
id: "open-tune-1"
});
$("body").append(open_tune.render().el);

Réponse au commentaire de

J'ai considéré l'option 1, mais a décidé contre elle, comme j'ai déjà une collection de tune des modèles dans le tunebook et ne veulent pas d'un autre objet dont j'aurais besoin pour conserver la synchronisation

Je suppose que cela dépend de quel type de ménage /synchronisation vous vous sentez le besoin de le faire, et pourquoi.

(par exemple, dans TuneModel.remove() j'aurais besoin de supprimer le point de vue de tunebook de la liste de points de vue... il faudrait sans doute un des événements de le faire, donc un événement que la solution commence à regarder de plus attrayant).

Pourquoi pensez-vous que vous "devez supprimer le point de vue de tunebook de la liste de points de vue"? (Je ne dis pas que vous ne devriez pas, juste de se demander pourquoi vous le voulez). Depuis que vous faites, comment pensez-vous @ggozad approche se distingue à cet égard?

Les deux techniques store ClosedTune objets dans le TuneBook instance. Dans @ggozad de la technique, il est juste caché derrière une couche d'abstraction qui rend peut-être moins évident pour vous.

Dans mon exemple, elles sont stockées dans un simple objet JS (tune_book.tunes). Dans @ggozad elles sont stockées dans la _callbacks structure utilisée par Backbone.Events.

L'ajout d'un ClosedTune:

1.

this.options.tunes[tune.id] = tune;

2.

this.on('buttonClick:' + tune.id, tune.handler, tune);

Si vous voulez vous débarrasser d'un ClosedTune (dites que vous le supprimer du document avec tune.remove() et vous voulez le point de vue de l'objet disparu complètement), à l'aide de @ggozad devra laisser un orphelin de référence pour la ClosedTune dans tune_book._callbacks, sauf si vous effectuez le même genre de ménage qui aurait du sens avec l'approche que je propose:

1.

delete this.options.tunes[tune.id];
tune.remove();

2.

this.off("buttonClick:" + tune.id);
tune.remove();

La première ligne de chaque exemple est facultatif, selon si vous voulez nettoyer les ClosedTune objets ou pas.

L'Option 2 est plus ou moins ce que je suis en train de faire maintenant, mais (pour d'autres raisons) j'ai également stocker le modèle comme un attribut de données.$el, et je peux pas m'empêcher de penser qu'il doit y avoir une meilleure façon de stocker les références de tous sur la place.

Bien, au final, il revient à votre préférence quant à la façon de structurer les choses. Si vous préférez stocker les objets de vue plus centralisé de la mode, vous pouvez les stocker dans le TuneBook exemple au lieu d'utiliser jQuery.data. Voir #1: Centralisé.

D'une manière ou d'une autre vous êtes stocker les références à la ClosedTune objets: à l'aide de jQuery.data, ou dans un objet ordinaire dans le TuneBook, ou dans _callbacks dans le TuneBook.

Si vous aimez @ggozad de l'approche pour des raisons que vous comprenez, allez-y, mais c'est pas de la magie. Comme il est présenté ici, je ne suis pas sûr de ce parti est censé être assuré par l'augmentation du niveau d'abstraction par rapport à la plus simple, la version que je présente en #1. Si il y a un certain avantage, n'hésitez pas à me remplir.

OriginalL'auteur JMM