使用带有 jQ​​uery Deferreds 的 BackboneJs

Question

我正在使用我从Sam Breed 中了解到的一种技术，用于在 Backbone 中使用 Deferreds。

在我的主干View 的initialize 方法中，我有以下内容：

var me = this;

this.deferredTemplate = $.ajax({
    url: 'details/welcomeMaster.htm'
}).done(function (data) {
    me.template = data;
});

这将为我加载位于我的View 外部的模板文件。

然后当我需要它时，这里是新的代码。

var something = new Dashboard.Views.WelcomeMasterView({
        collection: me.collection,
        el: $('.contentContainer')
});

something.deferredTemplate.done(function (data) {
        something.render();
});

不幸的是，我必须分解这两个语句，以便 something 是我的主干 View 而不是 jqXHR 对象。除此之外，这段代码工作得很好。

问题 关于如何将上述两个调用链接在一起的任何想法？在 .done() 方法中，我需要 Backbone View 对象。

Answer 1

我认为，如果您想保持简单，您可能更愿意先加载模板，然后在获取它们后构建任何视图。这就是说提供相同功能的 AMD 加载程序是如何工作的。

否则，一个想法是添加一个_render，它可以做你的render通常做的事情，比如说

_render: function () {
    this.$el.html(this.template(this.model.toJSON()));
},

然后，您的普通render 会在准备好时调用_render：

render: function () {
    this.deferredTemplate.done(this._render);
    return this;  
},

这会让事情变得简单，您可以像往常一样继续拨打render()。但请注意缺点：如果您依赖于在调用渲染后实际渲染（例如，您在其他地方操作 $el），您可能实际上没有该元素。

附带说明，虽然延迟非常适合 Backbone，但在您链接到的博客文章中使用它们是不必要的。对change 的简单绑定会以更简洁的方式完成相同的任务。