javascript - 在 Backbone 中调用父类(super class)方法

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 是一 block HTML，因此您将其交给 append:

this.$el.append(output);

但是 output 是一个函数，append do when called with a function 的作用是什么？作为它的论点？ jQuery 像这样调用该函数:

function(index, html)
Type: Function()
A function that returns an HTML string, DOM element(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.

因此，output 函数将由 jQuery 的 append 调用，并且 append 将提供已编译模板函数无法理解的参数。结果是一大堆困惑。

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

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

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

或者更好的是，根本不用担心所有额外的 wrapper 。在 View 的initialize中这样说:

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

然后在渲染中:

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

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

另请注意，您不需要 this.model = options.model，view constructor将为您做到这一点:

There are several special options that, if passed, will be attached directly to the view: model, collection, el, id, className, tagName and attributes.