Question

var BaseView = Backbone.View.extend({
    localizedTemplate : function (element) {
        template = _.template(element.html());

        return function (data) {
            return template($.extend({}, data, resource));
        };
    }
});

var DerivedView = BaseView.extend({
   initialize: function (options) {
       this.model = options.model;

       this.template = function () {
         return this.localizedTemplate($("#someTemplate"));
       };
   },

   render: function () {
       var output = this.template(this.model.toJSON());
       this.$el.append(output);
       return this;
   }
});

为什么上面的代码不起作用？为什么我无法在DerivedView中调用someFunction？有没有办法实现这个目标？

我正在使用Backbone最新版本。

Answer 1

执行此操作时：

this.template = function () {
    return this.localizedTemplate($("#someTemplate"));
};

您正在为this.template分配功能。请注意，localizedTemplate也会返回一个函数：

return function (data) {
    return template($.extend({}, data, resource));
};

这意味着this.template是一个返回函数的函数，第二个函数是想要this.model.toJSON()作为参数的函数。

你这样做：

var output = this.template(this.model.toJSON());

this.template中的函数忽略它的参数并返回一个函数，让你有这个函数：

function () {
    return this.localizedTemplate($("#someTemplate"));
}

output中的

。您可能认为output此时只是一大块HTML，因此您将其交给append：

this.$el.append(output);

但output是一个函数，append do when called with a function作为参数是什么？ jQuery调用这样的函数：

功能（索引，HTML）
  类型：功能（）
  一个函数，它返回一个HTML字符串，DOM元素或jQuery对象，以插入匹配元素集中每个元素的末尾。接收集合中元素的索引位置和元素的旧HTML值作为参数。在函数内，this引用集合中的当前元素。

因此output函数将由jQuery的append调用，而append将提供编译后的模板函数无法理解的参数。结果是一大堆混乱。

如果您真的想做这样的事情，那么您将需要自己调用所有函数，以便您可以在正确的位置获得正确的参数：

var output = this.template()(this.model.toJSON());
// -----------------------^^

演示：http://jsfiddle.net/ambiguous/YyJLR/

或者更好的是，不要费心去除所有额外的包装纸。在您的视图initialize：

中说出这一点

this.template = this.localizedTemplate($("#someTemplate"));

然后在render：

中

var output = this.template(this.model.toJSON());

演示：http://jsfiddle.net/ambiguous/BQjhS/

另请注意，您不需要this.model = options.model，view constructor会为您执行此操作：

有几个特殊选项，如果通过，将直接附加到视图：model，collection，el，id，className ，tagName和attributes。

Answer 2

var DerivedView = BaseView.extend({
   someVariable: function(someData) {
      return this.someFunction(someData);
   }
});

在Backbone中调用超类方法

2 个答案: