骨干网络应用架构 - 最佳实践答案

【问题标题】：Backbone web app architecture - best practice骨干网络应用架构 - 最佳实践
【发布时间】：2015-05-08 08:37:32
【问题描述】：

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

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

这就是我尝试在没有任何框架（如骨干或 Angular）的情况下构建 Web 应用 MVC 风格的方式：

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

每个主要对象，如 App、Page、Product 或任何拥有自己的 model 属性，该属性保存通常从 RESTful API 接口接收的数据和一个 view 属性，该属性保存一个 jQuery 对象HTML 和事件处理程序。一旦需要，它就会被克隆到 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 数据等）。

但是对于 Backbone，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({})
        }
    }

}

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

【问题讨论】：

你可能想知道Marionette.js，它是一个建立在Backbone之上的框架。

标签： javascript backbone.js web-applications

【解决方案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();

那里有很多教程更详细，你应该看看。

【讨论】：