[英]Backbone.js App approach not very scalable - nested views
我正在创建一个Backbone App,尽管一切似乎都正常,但我担心如果继续使用这种方法添加功能和视图,可能需要尽快重构。 我在后端使用Parse ,这意味着对象Parse
等效于Backbone.Model
。 我无法控制我的模型,因为它们已经针对移动设备进行了优化,在这里我只需要显示3种不同模型的某些关键值。
尽管没有任何“错误”(有效),但这只是时间问题,直到我开始犯“更大”的错误。
这是我的Router
:
App.Controllers.Documents = Backbone.Router.extend({
routes:{
"story/:id" : "fullStory",
"" : "index"
},
// ...
fullStory: function(id){
var self = this;
var query = new Parse.Query(Steps);
query.equalTo("story", id)
var steps = query.collection();
steps.fetch({
success: function() {
new App.Views.Steps({ collection: steps });
var title = new Story({ objectId: id });
title.fetch({
success: function(model, resp) {
new App.Views.Title({ model: title});
var idUser = title.toJSON().idUser;
var user = new Parse.User({ objectId: idUser });
user.fetch({
success: function(){
// I just need the username key here...
new App.Views.Username({model:user,el:$("#user")});
},
error: function(){
new Error({ message: 'Could not find the user you requested.' });
}
})
},
error: function() {
new Error({ message: 'Could not find that story.' });
}
})
},
error: function() {
new Error({ message: "Error loading story." });
}
});
}
给定在Parse中创建对象的方式,我需要访问3个不同的对象,这就是为什么我在“部件”中渲染View
。 我希望此函数仅在FullStory
包含这些“子视图”的情况下呈现FullStory
View
,但是我不确定如何执行该操作,因为“ Parse.Object
需要引用另一个对象-> var user = new Parse.User({ objectId: idUser });
其中idUser
是另一个对象的键。
最后我的Views
:
App.Views.Steps = Backbone.View.extend({
tagName : "ul",
className: "steps",
initialize: function() {
this.render();
},
render: function() {
this.$el.html(_.template($("#story_steps").html())({ collection: this.collection }));
$('#steps_wrapper').html(this.el);
},
});
App.Views.Title = Backbone.View.extend({
initialize: function() {
this.render();
},
render: function() {
this.$el.html(_.template($("#story_title").html())({ model: this.model }));
$('#title').html(this.el);
}
});
App.Views.Username = Backbone.View.extend({
initialize: function() {
this.render();
},
template: _.template('<%= name %>'),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
}
});
您正在以错误的方式进行操作。 您的路由器应该是几行代码,以进行初始查看/收集,并可能进行提取调用。 大多数功能应该在您的视图中。
您的路由器应该这样做
fullStory: function(id){
var self = this;
var query = new Parse.Query(Steps);// not sure what this does
query.equalTo("story", id) // This does nothing!
var stepsCollection = query.collection();
var stepsView = new App.View.Steps({collection: stepsCollection});
stepsCollection.fetch() // you could also do this in initialize()
}
现在,您需要知道的是collection.fetch()在集合上触发一个“重置”事件,该事件冒泡直至视图可以在其中进行处理。 因此,在视图中侦听您的“重置”事件并进行处理,然后重新渲染:
App.Views.Steps = Backbone.View.extend({
tagName : "ul",
className: "steps",
initialize: function() {
this.bindAll(this, 'render');
this.collection.bind('reset', this.render);
},
render: function() {
this.$el.html(_.template($("#story_steps").html())({ collection: this.collection }));
$('#steps_wrapper').html(this.el);
},
});
请记住, 单步负责原则 StepsView负责呈现和处理Steps事件(无论它们是什么)及其各自的模型/集合。 用户名视图负责呈现和处理与用户名有关的所有事情。 目前,路由器的所有工作都由责任人负责,这种方法是完全错误的。
我想问您是否需要USername和Title的单独视图-应该将它们作为更广泛视图的模板的一部分呈现出来-而不是自己的视图-它们什么都不做。
我感觉到您闻到了什么不对劲,这就是您发布问题的原因。 我将进行重要的重构-将路由器缩小到几行...您的视图将永远是骨干网中最大的类。
如果您想快速确定骨干网,我强烈推荐出色的peepcode截屏视频:
https://peepcode.com/products/backbone-js https://peepcode.com/products/backbone-ii https://peepcode.com/products/backbone-iii
您将在3个小时内花30美元了解所有内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.