javascript - 从多个 URL 加载模型

Question

如何使用不同的 URL 为模型加载不同的属性？

例如我有 3 个不同且独立的 URL，它们将返回一些属性，我想将所有这些属性添加到一个模型中，假设我有所有这些属性返回的 promise ，如下所示:

var model = //...    

$.when(nameAttributes, addressAttributes, metaAttributes).then(
function(nameData, addressData, metaData) {
    return _.extend({}, nameData, addressData, metaData);
})
.done(function(allData) {
    model.set(allData);
    doStuffWith(model);
});

有没有办法把它变成这样:

model.fetch().done(function(){ doStuffWith(model); });

Answer 1

嗯..好吧，这应该可以满足你的要求。我强烈建议您不要走这条路。将数据单独保存在各个 Model() 中，这样您就可以在需要时更新并提取它。如果您采用这种方法，保存数据将是一场灾难。

http://jsfiddle.net/kjhvwxg4/

PS。我尝试不再添加更多代码，但请记住，这可能无法很好地处理错误处理，因为 xhr 永远不会抛出错误，您需要自己捕获它 - 我没有想要花时间编码，因为这只是一个概念证明。

var Model1 = Backbone.Model.extend({
    fetch: function(options) {
        options = _.extend({
            parse: true
        }, options);
        var model = this;
        var success = options.success;
        var error = options.error;
        options.success = function(resp) {
            var serverAttrs = options.parse ? model.parse(resp, options) : resp;
            if (!model.set(serverAttrs, options)) return false;
            if (success) success.call(options.context, model, resp, options);
            model.trigger('sync', model, resp, options);
        };
        options.error = function(resp) {
            if (error) error.call(options.context, model, resp, options);
            model.trigger('error', model, resp, options);
        };

        // custom code starts here

        var call1 = $.getJSON('http://jsonplaceholder.typicode.com/posts/1');
        var call2 = $.getJSON('http://jsonplaceholder.typicode.com/comments/2');
        var call3 = $.getJSON('http://jsonplaceholder.typicode.com/albums/3');
        var xhr = $.when(call1, call2, call3);

        // mimics the same triggers the normal backbone does
        model.trigger('request', model, xhr, options);

        xhr.done(function(one, two, three){
            var resp = _.extend(one[0], _.extend(two[0], _.extend(three[0], {})));
            options.success(resp);              
        });

        // we still need to send back an event handler
        return xhr;
    }
});

var model = new Model1();
model.fetch();

model.on('sync', function(model) {
    alert(JSON.stringify(model.toJSON()));
});