从多个URL加载模型

时间:2015-10-19 22:56:28

标签: javascript backbone.js

如何使用不同的网址为模型加载不同的属性?

E.g。我有3个不同且独立的URL,它们将返回一些属性,我想将所有这些添加到单个模型中,假设我有这样的所有返回的承诺:

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); });

1 个答案:

答案 0 :(得分: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()));
});