我正在掌握Backbone.js,但有一件事我不明白是在哪里放置我需要设置页面的所有一次性jQuery代码。
你知道的事情:配置一个jQuery carousel插件,添加一个'scroll to top'箭头......当用户第一次加载页面时发生的一次性配置。
目前我正在路由器中执行此操作:
var AppRouter = Backbone.Router.extend({
routes: {
// some routes
},
initialize: function() {
initializeJqueryStuff();
} ...
});
var StateApp = new AppRouter();
Backbone.history.start({
pushState: true
});
function initializeJqueryStuff() {
// one-off jQuery stuff goes here
}
Yeuch。我应该怎么做? initializeJqueryStuff
应该是Router对象的另一个属性吗?它应该只是住在initialize
内吗?或者我应该将此代码与Backbone应用程序完全分开吗?
答案 0 :(得分:1)
我通常定义一个LayoutView
,即一个根视图,它负责呈现应用程序中的所有“实际”视图。在任何其他视图代码需要运行之前,此布局视图仅初始化一次。这也是我倾向于进行任何一次性视图配置的地方。
样品:
//LayoutView should be considered a singleton, only initialized once
var LayoutView = Backbone.View.extend({
el:'body',
initialize: function() {
this.initializeSomejQueryStuff();
},
renderChild: function(child) {
if(this._currentChild)
this._currentChild.remove();
this._currentChild = child;
this.$el.html(child.render().el);
},
initializeSomejQueryStuff: function() {
//init here
}
});
用法:
var AppRouter = Backbone.Router.extend({
routes: {
"foo/:id": "foo"
},
initialize: function() {
this.layout = new LayoutView();
},
foo: function(id) {
var model = new Foo({id:id});
var view = new FooView({model:model});
//delegate the view rendering to a layout
this.layout.renderChild(view);
}
});
答案 1 :(得分:0)
对不起,如果我的英语不好,我会错过一些细节。但正如我可以看到你的问题的主要观点:你可以配置和放置jQuery的东西,与Backbone无关?总而言之,您可以将此代码分开,然后将其链接到.html
Backbone只是一点点MVC。你可以操纵渲染的函数和一些与Backbone.View.extend({...})
中的视图相关的js东西,但总的来说,我觉得为不同的东西制作不同的结构是一个很好的观点。像这样的人:
.../
public/
css/
img/
lib/
..any source code for your plugins..
tpl/
..for your templates..
js/
models/
models.js
views/
..your views.js..
main.js(your backbone router and for example, .loadTemplate() func for templates and other)
..any code for plugings configuration..
所以我认为这种结构可以帮助理解什么是源代码,并让你清楚编码。
希望它对你有所帮助。对不起,如果我误解了。