这一次，我正在努力解决绑定事件的不同方法。我在我的代码中提到了所有提到的方法。我只是不知道，如果我正确的方式。也许我应该总是使用bindTo来确保我的视图在更改后完全关闭（目前这通常会产生错误）？是否有任何最佳实践可以帮助我朝着正确的方向前进？
为了说明我目前对Marionette的理解，这是我的应用程序中的一个模块。一如既往，每个提示都非常受欢迎。
PP.module('Grid', function(Grid, PP, Backbone, Marionette, $, _){
Grid.Product = Backbone.Model.extend({});
Grid.ProductCollection = Backbone.Collection.extend({
model: Grid.Product,
url: '/products/query'
});
Grid.ProductView = Backbone.Marionette.ItemView.extend({
className: 'grid',
template: 'public/templates/grid-template'
});
// Helper Methods
// -----------------------
var getGenderCode = function(genderName){
var genderMap = {
'men': 'M',
'women': 'W',
'unisex': 'A'
}
return genderMap.genderName;
}
// Public API
// -------------------
Grid.renderGrid = function(productCollection){
Grid.productView = new Grid.ProductView({
collection: productCollection
});
Grid.productView.bind('show', function(){
$('#isotope-container').isotope({
itemSelector : '.item',
containerStyle: {
position: 'relative',
zIndex: 1
}
});
});
PP.Layout.mainRegion.show(Grid.productView);
}
// Event Handlers
// -----------------------
PP.vent.bind('grid:requested', function(categoryData){
// use bootstrapped data on first start
if (PP.App.bootstrappedCategoryName !== categoryData.categoryName) {
Grid.productCollection.fetch({
data: {
gender: getGenderCode(categoryData.categoryName),
category: categoryData.categoryId
}
});
}
else {
PP.vent.trigger('mainview:ready', {
categoryName: PP.App.bootstrappedCategoryName
});
}
});
// Initializer
// --------------------
PP.addInitializer(function(options){
Grid.productCollection = new Grid.ProductCollection();
Grid.productCollection.on('reset', function(){
Grid.renderGrid(Grid.productCollection);
});
Grid.productCollection.reset(options.newArrivalsList);
});
});
答案 0 :(得分：34)
一般准则是，只要有一个在应用程序的整个生命周期中创建和销毁的对象，并且该对象需要绑定到来自其他对象的事件，就应该使用EventBinder。< / p>
观点就是一个很好的例子。视图始终被创建和销毁。它们还绑定了视图中model和collection的许多不同事件。视图被销毁时，需要清除这些事件。通过在视图上使用内置的bindTo方法，将为您清理事件处理程序。如果您不使用bindTo而是直接使用on，则必须手动调用off以在视图关闭/销毁时取消绑定事件。如果你不这样做，你最终会得到僵尸（内存泄漏）。
如果您尚未阅读，请查看以下文章：
http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/
视图并不是唯一适用的地方，而不是EventBinder的唯一用例。
如果您正在使用少量对象，绑定到它们的事件，并且这些对象可以替换为其他对象实例，那么EventBinder将是有用的。在这种情况下，将EventBinder视为相关对象的集合或事件组。
假设你有ObjA，ObjB和ObjC。其中每个都会触发一些事件，并且您希望确保在代码完成时清理事件处理程序。使用EventBinder：
doStuff = {
start: function(a, b, c){
this.events = new Marionette.EventBinder();
this.events.bindTo(a, "foo", this.doSomething, this);
this.events.bindTo(b, "bar", this.anotherThing, this);
this.events.bindTo(c, "baz", this.whatever, this);
},
doSomething: function(){ /* ... */ },
anotherThing: function(){ /* ... */ },
whatever: function(){ /* ... */ },
stop: function(){
this.events.unbindAll();
}
}
doStuff.start(ObjA, ObjB, ObjC);
// ... some time later in the code, stop it
doStuff.stop();
在此代码中调用stop将正确清理所有用于此用途的事件处理程序。
on / off 与所有这一切相反，就是说你并不总是需要使用EventBinder。你总能在没有它的情况下离开。但您需要记住在必要时清理您的活动。
在不需要清理事件处理程序的情况下，也不需要使用EventBinder。这可能是路由器触发的事件，或Marionette.Application对象触发的事件。对于那些应用程序生命周期事件或需要在应用程序的整个生命周期中生存的事件，请不要使用EventBinder。相反，只需让事件处理程序继续运行。当此人刷新浏览器窗口或导航到其他站点时，处理程序将在此时清理。
但是当您需要管理内存和事件处理程序，清理引用并关闭内容而不刷新页面或离开页面时，EventBinder变得很重要，因为它简化了事件管理。