Question

我正在使用backboneJS重写一个web应用程序，我想知道与我之前的方法相比的一般架构。

如果您认为此问题应该在CodeReview而非StackOverflow上，请与我们联系。

这就是我尝试构建没有像骨干或角度这样的框架的Web应用MVC风格的方式：

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

每个主要对象，例如App，Page，Product或其拥有自己的model属性的任何属性，通常都会从RESTful API接口和{{1包含所有HTML和事件处理程序的jQuery对象的属性。一旦需要，它就会被克隆到DOM中。

view

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

但是使用Backbone似乎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({}) } }和View是他们自己的，单独的对象，我不确定我是否应该将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({})
    }

}

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

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();

有许多教程更详细，你应该检查出来。

骨干网络应用程序架构 - 最佳实践

1 个答案: