【问题标题】:Backbone fetching multiple models主干获取多个模型
【发布时间】:2014-11-26 05:00:06
【问题描述】:

我一直在与骨干一起工作,但我很快发现我正在做的事情变得过于乏味和重复。

我将有多个主干视图,每个视图都有一个模型,该模型调用数据的 api。一旦完成,我想渲染结果。不过,这很简单,我必须将来自其他来源(消息传递系统)的数据附加到每个模型

//this corresponds to the view
$.when(this.model.fetch(), this.msg.fetch()).done((result1, result2) => {
    this.model.set('msg', this.msgtoJSON(), { silent: true });
    this.renderTemplate(template, this.model.toJSON());
});

这行得通,但到处都在重复。我对此有几十个意见。这也阻止了我为主模型上的更改事件附加对象侦听器,以便可以重新呈现模板。

对于我如何在获取这些模型时异步获取此消息传递依赖项并将其注入到我的主干模型中,是否有人有任何建议?

【问题讨论】:

    标签: javascript backbone.js


    【解决方案1】:

    您可以使它们相互依赖,合并两个模型的 fetch。它会破坏Backbone.Model.fetch 的一些原生实现,但会帮助您避免代码重复。一种非规范化来规范化。

    var Slave = Backbone.Model.extend({
         urlRoot: 'first/api',
         defaults: {
             val1: '',
             val2: ''
         }
    });  
    
    var Master = Backbone.Model.extend({
        initialize: function(options) {
            this.slave = options.slave;
        }, 
        urlRoot: 'second/api', 
        fetch: function(options) {
            var that = this,
                masterPromise = this.constructor.__super__.fetch.call(this, options);
    
            if (this.slave) {
                return $.when(masterPromise, this.slave.fetch()).done(function(result1, result2){ //merged promise
                    that.set('msg', that.slave.toJSON(), { silent: true });                 
                });
            }
            return masterPromise;
        }
    });
    

    然后:

    var slave  = new Slave(),
        master = new Master({ slave: slave });
    
    master.fetch().done(function(){
       // render template here.
    })
    

    此实现适用于两种情况,无论有无从属模型。

    注意事项

    1.如果你处理成功回调来渲染模板:

    master.fetch({success: function() { // rendering here}});
    

    在这种情况下'msg' 将是未定义的,因为success 不会等待奴隶的承诺。您需要避免使用success

    2.如果模型的 fetch 之一失败,并且您将在合并的 Promise 上设置 fail 回调,它将在模型的其中一个提取失败时触发。如果您需要为每个模型的失败案例单独做一些工作人员,您需要在合并承诺之前将它们附加到模型的 fetch 中。

    附言。我还没有测试过这段代码,所以如果有问题请告诉我。

    【讨论】:

    • 感谢您的反馈。在我看来,我可能做不到this.listenTo(master, "change", renderTemplateCallback);,对吗?我认为大师的成功会引发变革。我不确定在从属完成之前阻止主控更改回调是否可行。
    • 我想你可以。如果出现问题,请在您的应用中尝试并在此处发布。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-11-14
    • 1970-01-01
    • 2016-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-29
    相关资源
    最近更新 更多