Backbone web应用程序体系结构 - 最佳实践

Question

我正在重写backboneJS中的web应用程序，我想知道与我以前的方法相比的一般体系结构。

请让我知道如果你认为这个问题应该在CodeReview而不是StackOverflow。

这是我怎样努力构建网络应用MVC风格不一样骨干或有角的任何框架：

var App = function() { 
    // ... 
}; 

每一个主要的物体，像App，Page，Product或任何有它自己的model属性，通常可以保存数据从RESTful API接口和一个包含所有HTML和事件处理程序的jQuery对象的view属性接收。一旦需要，它被克隆到DOM中。

var Page = function(model) { 
    this.model = model; 
    this.view = this.render(); 
} 

Page.prototype.render = function() { 
    //get template, render it return jQuery object 

    return $(html) 
} 


window.Shop = { 
    app: new App({}), 
    pages: { 
     home: new Page({}), 
     products: new Page({}) 
    } 

} 

这是我对很多网络应用程序的传统方法。它的结构很好，我总是知道在哪里可以找到我的数据和我的观点。更重要的是，它们是同一对象的一部分，所以我可以轻松处理视图和模型数据之间的承诺和/或延迟对象（hbs模板，API数据等）。

但与骨干，它似乎像View和Model是他们自己的，单独的对象，我不知道我是否应该处理视图作为模型的子对象，其他方式或甚至在同一水平。

这是一种方法

var PageView = Backbone.View.extend({}); 
var Page = Backbone.Model.extend({ 

    initialize: function() { 
     this.view = new PageView(); 
    } 

}); 

window.Shop = { 
    pages: { 
     home: new Page({}), 
     products: new Page({}) 
    } 

} 

这是另一种方法，我看到的问题，因为我不能从模型或周围的其他方式访问视图（它们之间没有关系）。

var PageView = Backbone.View.extend({}); 
var Page = Backbone.Model.extend({}); 

window.Shop = { 
    pages: { 
     home: { 
      view: new PageView({}), 
      model: new Page({}) 
     }, 
     products: { 
      view: new PageView({}), 
      model: new Page({}) 
     } 
    } 

} 

还有很多其他的可能性，我不确定什么是最好的前进方式。

Answer 1

MVC的一个主要原则是模型不应该知道控制器/视图层。你不应该从模型访问视图。这样可以在多个视图中使用相同的模型。

在Backbone中，通常在模型创建时将模型传递到视图中。看看下面这个例子。

var User = Backbone.Model.extend({}); 
var UserView = Backbone.View.extend({ 
    render: function() { 
    this.$el.html(this.template(this.model.toJSON()); 
    return this; 
    } 
} 

var view = new UserView({model: new User()}); 
view.render(); 

通常这是通过从服务器获取集合然后在集合中显示每个模型来完成的。

var User = Backbone.Model.extend({}); 
var UserCollection = Backbone.Collection.extend({ 
    model: User 
}); 

var UserView = Backbone.View.extend({ 
    render: function() { 
    this.$el.html(this.template(this.model.toJSON()); 
    return this; 
    } 
} 

var UsersView = Backbone.View.extend({ 
    initialize: function() { 
    this.listenTo(this.collection, 'reset sync', this.render); 
    }, 

    render: function() { 
    this.$el.empty(); 
    this.collection.each(function(user) { 
     var view = new UserView({model: user}); 
     this.$el.append(view.render().el); 
    } 
    return this; 
    } 
} 

var users = new UserCollection(); 
var view = new UsersView({collection: users}); 
users.fetch(); 

有很多教程在那里，去更详细，你应该检查出来。