了解 backboneJS：View.extend()

Question

直到今天我还想使用 backbone 的功能，例如

var PageView = Backbone.View.extend({
    template: $.Deferred,
    getTemplate: function(tplName) {
        var self = this;
        ajaxCall(tplName).then(function(hbs) {
            self.template.resolve(hbs);
        });
    }
});

var home = new PageView();
home.getTemplate('home.hbs');

类似于像

这样的纯 JS OOP 方法

var PageView = function() {
    this.template = $.Deferred();
}

PageView.prototype.getTemplate = function(tplName) {
    var self = this;
    ajaxCall(tplName).then(function(hbs) {
        self.template.resolve(hbs);
    });
}

var home = new PageView();
home.getTemplate('home.hbs');

但是，我目前正在尝试使用 backbone 重建一个网络应用程序，似乎可以解决使用

延迟的问题

home.getTemplate('home.hbs');

将为 Backbone 视图 PageView 的所有实例解决此问题，而在纯 JS 中，这只会解决该特定实例 home.

当我做第二个实例时：

var page1 = new PageView();

template 属性已通过 backbone 中的 home.hbs 模板解析。这对我来说很奇怪。

所以我的猜测是我从根本上误解了 backbone 视图的工作原理。谁能赐教一下？

Answer 1

不同之处在于所有实例的第一个片段 template 属性引用同一个对象，而在第二个片段中属性是使用 different/new 执行构造函数时的 Deferred 实例。如果您在构造函数的 initialize 函数中设置 template 属性，您将获得与第二个片段相同的结果：

var PageView = Backbone.View.extend({
    // template: $.Deferred,
    initialize: function() {
       this.template = $.Deferred;
    },
    getTemplate: function(tplName) {
        var self = this;
        ajaxCall(tplName).then(function(hbs) {
            self.template.resolve(hbs);
        });
    }
});

在第二个示例中，如果将 template 设置为构造函数的 prototype，那么它的行为将类似于 backbone 构造函数：

var PageView = function() {
   // this.template = $.Deferred();
}
PageView.prototype.template = $.Deferred();

var instance1 = new PageView();
var instance2 = new PageView();
console.log( instance1.template === instance2.template ); // true

了解 backboneJS：View.extend()

Understanding backboneJS: View.extend()

javascript

model-view-controller

backbone.js