Backbone Model:解析覆盖中的Ajax请求

lbr*_*him 7 javascript ajax jquery backbone.js backbone-model

我有一个场景,fetch()模型的调用将返回一个数据,需要将属性传递给另一个API,并且该API的返回类型将是实际需要的数据.

var Issue = Backbone.Model.extend({
    urlRoot: 'https://api.github.com/repos/ibrahim-islam/ibrahim-islam.github.io/issues',
    parse: function(response, options){
        var markdown = new Markdown({ text : response.body });
        markdown.fetch({
            contentType: 'application/json',
            type: 'POST',
            data: JSON.stringify( markdown.toJSON() ),
            success: function(data){
                response.body = data;
            }
        });
        return response;
    }
});

var Markdown = Backbone.Model.extend({
    defaults:{
        'text': '',
        'mode' : 'markdown'
    },
    url: 'https://api.github.com/markdown'
});
Run Code Online (Sandbox Code Playgroud)

所以,当一个Issue将被取出:

var issue = new Issue({id: 1});
issue.fetch().then(function(){
  //do stuff
});
Run Code Online (Sandbox Code Playgroud)

它将具有body包含markdown语法文本的属性,反过来我需要传递给另一个API并获取将传递给视图的响应.

从上面可以看出,我试图重写parse,但它的返回类型必须是一个对象,并fetchasync所以我能做些什么在这里,使这项工作?

注意:我知道聚合服务器中的数据然后接收它将是最好的想法,但这是不可能的atm.

nik*_*shr 4

您可以重写模型中的同步方法Issue 来链接您的请求。

var Issue = Backbone.Model.extend({
    urlRoot: 'https://api.github.com/repos/ibrahim-islam/ibrahim-islam.github.io/issues',

    sync: function(method, model, options) {
        if (method !== 'read')
            return Backbone.sync.apply(this, arguments);

        // first request
        var xhr = Backbone.ajax({
            type: 'GET', 
            dataType: 'json',
            url: _.result(model, 'url')
        });

        // second request
        return xhr.then(function (resp1) {
            var markdown = new Markdown({text : resp1.body || 'body'});
            var data = markdown.toJSON();

            // the callback to fill your model, will call parse
            var success = options.success;

            return Backbone.ajax({
                url: _.result(markdown, 'url'),
                dataType: 'html',
                contentType: 'application/json',
                type: 'POST',
                data: data
            }).then(function(resp2) {
                // sets the data you need from the response
                var resp = _.extend({}, resp1, {
                    body: resp2
                });

                // fills the model and triggers the sync event
                success(resp);

                // transformed value returned by the promise
                return resp;
            });
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

传递给的选项哈希Model.sync包含对 的回调model.parse,当您对数据感到满意时,您可以使用它来设置模型的属性。

和演示http://jsfiddle.net/puwueqe3/5/