javascript - 我如何用 Backbone MVC 表达数据依赖？

Question

我有一个很少更改的单例集合，但不是静态数据。假设它是对象可以具有的可能形状的列表:

var Shape = Backbone.Model.extend({});
var Shapes = new Backbone.Collection.extend({
  url: "/mydata"
});
Shapes.fetch()

我有一个模型和关联的集合，用于我的 View 将与之交互的模型。我们称它们为结构:

var Structure = Backbone.Model.extend({
  initialize: function(options) {
    this.vecs = some_utility_function(options.shape);
  }
});

var Structures = Backbone.Collection.extend({
  model: Structure,
  create: function(options) {
    var shape = options.shape || Shapes.get("weird_square");
    return new Structure(Shapes.get("weird_square"));
  }
});

问题出在集合的create功能:调用Shapes.get()在 Shapes 集合被触发之前不会工作 sync至少一次。

所以已经存在一个复杂性问题:现在我的 View 需要知道它们需要等待 sync来自 Shapes 的事件收藏前可以调用create()在 Structures 集合上获取新的模型实例。

更糟糕的是:我的 View 可能永远不会看到同步，因为它会很快得到响应，并且在创建这些 View 之前需要发生很多其他事情。

我能想到的唯一解决方案是:

• 一个可怕的更高级别的 View 或模型，它知道在我的 View 和模型可以相互对话之前需要准备的一切，并在做任何事情之前以某种方式解决这些依赖关系。这是可以实现的，但很难维护，而且我给它的任何结构都会显得随意
• 更改集合的 create 中的代码所以它实际上只是给出模型的 stub 实例，并且只有在 Shapes 集合准备就绪后，它才会触发回调以填充该对象并调用 sync在模型实例上。这有点糟糕，因为现在 sync在模型上可能意味着“该对象现在已经真正创建”以及与服务器同步的通常含义。

有没有更好的办法？

Answer 1

您可以使用 promises并且，由于 jQuery 是一个依赖项，$.Deferred , 同步你的对象。例如，您可以修改您的 Structures 类以包含返回 promise 的 extrude 方法¹:

var Structures = Backbone.Collection.extend({
    model: Structure,
    extrude: function(options) {
        options = options || {};
        var dfd = $.Deferred();

        if (options.shape) {
            // resolved immediately
            dfd.resolve(new Structure(options.shape));
        } else {
            // resolved when Shapes.fetch completes
            Shapes.fetch().then(function() {
                dfd.resolve(new Structure(Shapes.get("weird_square")));
            });
        }
        return dfd.promise();
    }
});

在您看来，您会使用此 promise 来“等待”模型。行为是相同的，无论 Structures.extrude 必须做什么来构建您的 Structure 模型

var s = new Structures();

// without shapes.get
s.extrude({shape: {}}).then(function(m) {
    console.log(m);
});

// with shapes.get
s.extrude().then(function(m) {
    console.log(m);
}); 

还有一个演示 http://jsfiddle.net/nikoshr/xMSJ6/ .

如果您希望在 Shapes 对象的生命周期内发生单个 fetch，您可以覆盖其 fetch 方法以返回相同的每次都是 xhr 对象:

Shapes.fetch = function() {
    if (!this.__xhr) {
        this.__xhr = Backbone.Collection.prototype.fetch.call(this);
    }
    return this.__xhr;
}

http://jsfiddle.net/nikoshr/xMSJ6/1/

¹ create 由 Backbone.Collection 使用，覆盖它可能是也可能不是你想要的