backbone.js - 何时使用 bindTo、绑定(bind)或与 Backbone.Marionette 一起使用？

Question

这次我正在努力使用不同的方法来绑定(bind)事件。我的代码中有所有提到的方法。我只是不知道，如果我走对了。也许我应该总是使用 bindTo 来确保我的 View 在更改后完全关闭(目前这通常会产生错误)？是否有任何最佳实践可以帮助我朝着正确的方向前进？

为了说明我目前对 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);
  });
});

Answer 1

一般准则是，任何时候您有一个对象在应用程序的整个生命周期中被创建和销毁，并且该对象需要绑定(bind)到来自其他对象的事件，您应该使用 EventBinder .

View 和内存泄漏

View 就是一个很好的例子。 View 一直被创建和销毁。它们还绑定(bind)到来自 model 的许多不同事件。和 collection在 View 上。当 View 被销毁时，需要清理这些事件。通过使用内置的 bindTo View 上的方法，事件处理程序将为您清理。如果你不使用 bindTo而是使用 on直接，您必须手动调用 off在 View 关闭/销毁时取消绑定(bind)事件。如果你不这样做，你最终会遇到僵尸(内存泄漏)。

如果您还没有阅读它们，请查看以下文章:

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/

自定义事件分组

然而， View 并不是唯一适用的地方，也不是 EventBinder 的唯一用例。 .

如果您正在处理少量对象，绑定(bind)到它们的事件，并且这些对象可以被其他对象实例替换，那么 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变得很重要，因为它简化了事件管理。