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

Question

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

如果你认为这个问题应该出现在CodeReview而不是StackOverflow上，请告诉我。

这就是我如何尝试构建web应用MVC风格，而没有任何框架，如脊骨或棱角：

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

每个主要对象(如App、Page、Product或其他任何东西)都有自己的model属性，这些属性保存的数据通常来自RESTful API接口，以及一个view属性，该属性包含带有所有HTML和事件处理程序的jQuery对象。一旦需要，就将其克隆到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的主要原则之一是，模型永远不应该知道控制器/视图层。您不应该从模型中访问视图。这样您就可以在多个视图中使用相同的模型。

在主干中，通常在创建模型时将模型传递到视图中。请查看下面的示例。

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

有许多教程可以更详细地介绍，您应该检查它们。