Question

我有一个有两个视图的backbonejs应用程序。它看起来像这样：

<body>
  <header></header>
  <div id="content"></div>
</body>

每次加载视图时，应用程序都会通过完全覆盖#content的内容来覆盖当前视图。

// Like this...
$('#content').html( new primaryView().render() );
// ...and this.
$('#content').html( new secondaryView().render() );

该应用程序具有全局集合。

App.Collection();

辅助视图根据全局集合修改自身。因此，它将一个函数绑定到views initialize函数中App.Collection上的'add'事件';

App.Collection.bind('add', function(){
    console.log('Item added');
});

导致我的问题。每次加载辅助视图时，都会将新函数绑定到App.Collection的add事件。如果我从主视图到辅助视图三次，每次将项添加到App.Collection时，该函数将触发三次。

我做错了什么？如果在视图上有一个uninitialize函数，我可以看到我会怎么做。如果我在加载后从未删除过视图，我可以看到如何做到这一点。如果我可以命名Jquery中的事件，我可以看到我会怎么做。（通过在绑定之前解除绑定）。

Answer 1

您可以相当多地概括您的问题。基本上，你正在编写一个事件驱动的应用程序，在这样的应用程序中应该注意事件。

查看this post以查看在骨干网中使用事件处理程序的推荐方法。

Answer 2

根据具体情况，您可以使用initialize和render方法来处理创建视图的不同方面。例如，您可以将绑定放在initialize

中

initialize: function() {
  App.Collection.bind('add', function(){
    this.view.render()
  });
}

仅在创建视图时触发。这会将您的render方法绑定到add事件。然后在render方法中，您可以实际创建html。

这可以防止每次需要重新渲染时发生绑定。