我正在开发一个backbone.js-application,并且已经达到了我有许多路由器和视图代表我的应用程序的每个部分的程度。在下面简化的路由器示例中,我有两个位置; account
& users
。
每个位置的两个视图都将其内容呈现给名为#appcontainer
的共同元素。我的常识说我应该在启动另一个视图之前确保remove
每个视图以防止绑定,DOM和诸如此类的碰撞。
但由于我无法确定是否已创建视图,因此我无法从路由器或视图中明确调用previousView.remove()
。
将$(this.el).empty()
添加到每个视图的构造函数中以清除DOM中的任何最终先前绑定和元素是否足够?
这是路由器示例?
var myRouter = Backbone.Router.extend({
routes: {
"account": "account",
"users": "users"
},
account: function() {
view = new AccountView({});
view.render();
},
users: function() {
view = new UserView({});
view.render();
}
});
答案 0 :(得分:11)
我有一个非常简单的实现,我现在只是启动我的应用程序,并且不知道从长远来看这将如何保持,但它看起来像这样:
编辑:以下是整个文件的外观。 this.render将是myRouter的另一个功能。
var myRouter = Backbone.Router.extend({
routes: {
'path/to/account' : 'account',
'path/to/users': 'users'
}
account: function() {
view = new AccountView({});
this.render(view);
},
users: function() {
view = new UserView({});
this.render(view);
},
render: function (view) {
//Close the current view
if (this.currentView) {
this.currentView.remove();
}
//render the new view
view.render();
//Set the current view
this.currentView = view;
return this;
}
});