Javascript Backbone.js-一个视图有多个模型

我有一个模板需要从两个不同的API端点（URL）接收数据：

cart

和

user

我希望两个端点充当一个模型或集合，以便我可以执行类似于

.changedAttributes（）

或

同步

，或

获取

的操作

我知道你很宽容，但我真的迷路了

---

游乐场： 我已经创建了一个代码笔来查看我到目前为止所做的工作：

---

期望的结果应该是：

initialize: function(){
  var self = this;
  collection.fetch({
  success: function(data){
      self.collection = data;
    }
  })
},

render: function(){
    var self = this;
    var source = $("#template").html();
    var template = Handlebars.compile(source);
    var htmlToRender = template(self.collection.toJSON());
}  

---

您可以创建一个事件集中器，侦听其注册的对象并重新触发捕获的事件

差不多

var aggregate = _.extend({}, Backbone.Events);
aggregate.register = function(m) {
    var self = this;

    this.listenTo(m, 'all', function() {
        this.trigger.apply(this, arguments);
    });
};

然后你会像这样使用它

aggregate.on('change', function(m) {
    // do what you have to do when one of the models change
    console.log('Change on ', m.toJSON());
});
aggregate.on('sync', function(m) {
    //same thing for syncs
    console.log('sync ', m.toJSON());
});

var m1 = new Backbone.Model({id: 1});
var m2 = new Backbone.Model({id: 2});
aggregate.register(m1);
aggregate.register(m2);

m1.fetch();
m2.set({data: 2});

---

还有一个演示

您可以创建一个事件集中器，监听其注册对象并重新触发捕获的事件

差不多

var aggregate = _.extend({}, Backbone.Events);
aggregate.register = function(m) {
    var self = this;

    this.listenTo(m, 'all', function() {
        this.trigger.apply(this, arguments);
    });
};

然后你会像这样使用它

aggregate.on('change', function(m) {
    // do what you have to do when one of the models change
    console.log('Change on ', m.toJSON());
});
aggregate.on('sync', function(m) {
    //same thing for syncs
    console.log('sync ', m.toJSON());
});

var m1 = new Backbone.Model({id: 1});
var m2 = new Backbone.Model({id: 2});
aggregate.register(m1);
aggregate.register(m2);

m1.fetch();
m2.set({data: 2});

---

和一个演示

一个基于。基本思想是设置一个可以在两个视图中引用的事件对象。您可以随意命名事件，并且可以在对象可用的任何位置触发和收听事件

创建事件对象。在您的情况下，将其添加到主appshell对象中

appShell.Events = _.extend({}, Backbone.Events);

当用户在用户视图中执行诸如注销之类的操作时，触发一个事件

appShell.Events.trigger('user:logout');

在另一个视图中聆听事件，并根据事件执行操作

this.listenTo(appShell.Events, 'user:logout', this.doSomething);

在doSomething中加入逻辑，以便在另一个视图中执行您需要执行的任何操作

---

一个稍有不同的方法，以nikoshr为基础。基本思想是设置一个可以在两个视图中引用的事件对象。您可以随意命名事件，并且可以在对象可用的任何位置触发和收听事件

创建事件对象。在您的情况下，将其添加到主appshell对象中

appShell.Events = _.extend({}, Backbone.Events);

当用户在用户视图中执行诸如注销之类的操作时，触发一个事件

appShell.Events.trigger('user:logout');

在另一个视图中聆听事件，并根据事件执行操作

this.listenTo(appShell.Events, 'user:logout', this.doSomething);

在doSomething中加入逻辑，以便在另一个视图中执行您需要执行的任何操作

---

为什么需要两个端点作为一个模型？这可能会使为每个对象创建一个模型、单独侦听每个对象上的“同步”事件以及呈现与每个对象对应的视图部分变得更简单，因为购物车和用户在逻辑上是两个独立的实体。@noahpc true，但如果用户正在注销，购物车视图不会知道这一点，即使当前用户在db上的购物车中没有任何东西，它仍然会在购物车中显示x个项目…无论如何，我理解你所说的，将在将来看到事情的发展。这是有意义的。我补充了另一个答案，它采用了一种稍微不同的方法。如果您对如何在您的案例中实现它有任何疑问，请告诉我。为什么您需要两个端点作为一个模型？这可能会使为每个对象创建一个模型、单独侦听每个对象上的“同步”事件以及呈现与每个对象对应的视图部分变得更简单，因为购物车和用户在逻辑上是两个独立的实体。@noahpc true，但如果用户正在注销，购物车视图不会知道这一点，即使当前用户在db上的购物车中没有任何东西，它仍然会在购物车中显示x个项目…无论如何，我理解你所说的，将在将来看到事情的发展。这是有意义的。我补充了另一个答案，它采用了一种稍微不同的方法。如果您对如何在您的案例中实施它有任何疑问，请告诉我。