使用多个集合填充 Backbone 个视图

Question

我是 Backbone 的新手。

我正在寻找适合我情况的设计模式。

目前我有一个包含多个 html select:

的视图模板

<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
....

并且将使用多个 Backbone 集合填充 select，具有不同的 JAX-RS API 路径。

var C1 = Backbone.Collection.extend({
    url='/path1'
});

var C2 = Backbone.Collection.extend({
    url='/path2'
});

...

一个直接的方法，就是有一个像 this:

这样的解决方案

render: function(){
    var that = this, promises = [], 
        c1 = new C1(), c2 = new C2(), c3 = new C3();

    promises.push(c1.fetch());
    promises.push(c2.fetch());
    promises.push(c3.fetch());
    ...

    $.when.apply(null, promises).done(function(){
        that.$el.html(FormTemplate({c1m: c1.models, c2m: c2.models, c3m: c3.models, ...}));
    });

    return this;
}

但是，这将涉及从客户端到 Java 服务器的多次 API 调用。有什么方法可以只使用 1 个 API 调用来实现这个目标吗？

谢谢。

Answer 1

显然 API 应该提供 returns 所有数据的单一路由。然后您可以使用单个集合获取它，并将过滤后的数据传递给其他集合，而无需它们进行 API 调用。

类似于：

var SingleEndPointCollection = Backbone.Collection.extend({
  url = '/singleEndPoint'
});

var C1 = Backbone.Collection.extend({});

var C2 = Backbone.Collection.extend({});

var C3 = Backbone.Collection.extend({});

var view = Backbone.View.extend({
  initialize: function() {
    var that = this;
    this.collection = new SingleEndPointCollection();
    this.collection.fetch({
      success: function(collection, response) {
        that.c1 = new C1(collection.filter(function() {
          // your logic here
        }));
        that.c2 = new C2(collection.filter(function() {
          // your logic here
        }));
        that.c3 = new C3(collection.filter(function() {
          // your logic here
        }));
        that.render();
      }
    });
  },
  render: function() {
    var that = this;
    that.$el.html(FormTemplate({
      c1m: that.c1.toJSON(),
      c2m: that.c2.toJSON(),
      c3m: that.c3.toJSON()
    }));
    return this;
  }
});

使用多个集合填充 Backbone 个视图

Populate Backbone View with multiple Collections

java

backbone.js

jax-rs

backbone.js-collections