Backbone 网络应用架构 - 最佳实践

Question

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

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

这就是我尝试在没有任何框架的情况下构建 Web 应用程序 MVC 风格的方法，例如 backbone 或 angular:

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

每个主要 object 像 App、Page、Product 或任何拥有它自己的 model 属性的东西通常会收到数据来自 RESTful API 接口和 view 属性，其中包含 jQuery object 以及所有 HTML 和 event-handlers.一旦需要，它就会被克隆到 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({})
    }

}

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

但是 Backbone 似乎 View 和 Model 是它们自己的，分开的 Objects 我不确定我是否应该处理视图作为模型的child-object，反过来甚至在同一水平上。

这是一种方法

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 的主要原则之一是模型永远不应该知道 controller/view 层。您永远不应该从模型访问视图。这样您就可以在多个视图中使用相同的模型。

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

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

Backbone 网络应用架构 - 最佳实践

Backbone web app architecture - best practice

javascript

web-applications

backbone.js