我不明白如何使用 browserify 在不同的 View 之间共享某种“单例”应用程序状态持有对象模型。 书籍和教程经常使用全局命名空间,例如:
var app = app || {};
我有一个简单的示例应用程序,它包括:
app.js
var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var MenuView = require('./views/MenuView');
var ContainerView = require('./views/ContainerView');
new MenuView();
new ContainerView();
MenuView.js
var Backbone = require('backbone');
var ApplicationState = require('../models/ApplicationState');
module.exports = Backbone.View.extend({
el: '#menuView',
events: {
'click .menuLink': 'changePage'
},
changePage: function(event) {
event.preventDefault();
var viewName = $(event.target).attr('data-view');
ApplicationState.set('currentView',viewName);
}
});
ContainerView.js
var Backbone = require('backbone');
var ApplicationState = require('../models/ApplicationState');
module.exports = Backbone.View.extend({
el: '#containerView',
initialize: function() {
this.listenTo( ApplicationState, 'change', this.render );
this.render();
},
render: function() {
this.$el.html( ApplicationState.get('currentView') );
},
close: function() {
this.stopListening();
}
});
这似乎使用这种方法工作:
ApplicationState.js var Backbone = require('backbone');
var ApplicationState = Backbone.Model.extend({
defaults: {
currentView: 'TransactionListView'
}
});
module.exports = new ApplicationState();
ApplicationState 模块真的只创建一次(缓存)吗? 或者是否存在重新创建/重置模块的风险?
我的用例的最佳做法是什么?非常感谢。
最佳答案
是的,你举的例子中只会有一个ApplicationState。只要 js 文件运行,Browserify 就会执行 module.exports =
之后的任何内容,然后任何需要该文件的内容都会传递对结果的引用。
然而,通常更好的做法是避免在 View 之间以这种方式共享状态,而是使用委托(delegate)给 subview 的父 View 。有多种方法可以进行设置。有关组织主干应用程序的最佳实践的想法,请查看此演讲:https://www.youtube.com/watch?v=Lm05e5sJaE8
对于您给出的示例,我会高度考虑使用 Backbone's Router . 在您的示例中,您有一个更改“主” View 的导航。 Backbone.Router 拦截导航并根据调用 View 方法的指定路由检查它。例如:
router.js
module.exports = Backbone.Router.extend({
initialize: function(options){
this.ContainerView = new ContainerView();
},
routes: {
'transactions': 'showTransactionListView',
'transaction/:id': 'showTransactionDetailView'
},
showTransactionListView: function() {
this.ContainerView.render('TransactionListView');
},
showTransactionDetailView: function(id) {
this.ContainerView.render('TransactionDetailView', id);
}
});
然后到 #transations
的任何链接(或者如果您使用的是 transactions
Backbone History )将调用您的 ContainerView.render('TransactionListView')
。而且,作为奖励,如果您重新加载页面,您仍然会看到 TransactionListView
。
其他说明:
- 您需要确保在替换旧 View 时丢弃它们(通过对它们调用
.remove()
)以避免内存泄漏。 Further Reading - 您可以为您的路由器增加一些灵 active ,并使用 Controller 模式来呈现带有 this nifty plugin 的 subview 。
关于javascript - Browserify+Backbone.js "ApplicationState"共享模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25552348/