在meteor.js中使用继承

时间:2012-11-26 15:19:41

标签: javascript model-view-controller inheritance meteor

我一直希望在Meteor中使用继承,但我在文档或Stack Overflow上找不到任何关于它的内容。

是否可以让模板从另一个抽象模板或类继承属性和方法?

3 个答案:

答案 0 :(得分:18)

我认为简短的回答是否定的,但这是一个更长的答案:

我在模板之间共享功能的一件事是定义一个帮助对象,然后将它分配给多个模板,如下所示:

var helpers = {
    displayName: function() {
        return Meteor.user().profile.name;
    },
};

Template.header.helpers(helpers);
Template.content.helpers(helpers);

var events = {
    'click #me': function(event, template) {
        // handle event
    },
    'click #you': function(event, template) {
        // handle event
    },
};

Template.header.events(events);
Template.content.events(events);

它确实不是继承,但它确实使您能够在模板之间共享功能。

如果您希望所有模板都可以访问帮助程序,您可以定义一个全局帮助程序(参见https://github.com/meteor/meteor/wiki/Handlebars):

Handlebars.registerHelper('displayName',function(){return Meteor.user().profile.name;});

答案 1 :(得分:2)

我已回答了这个问题here。虽然该解决方案不使用inheritance,但它允许您轻松地跨模板共享事件和帮助程序。

简而言之,我定义了一个extendTemplate函数,它接受一个模板和一个带有帮助器和事件作为参数的对象:

extendTemplate = (template, mixin) ->
  helpers = ({name, method} for name, method of mixin when name isnt "events")
  template[obj.name] = obj.method for obj in helpers

  if mixin.events?
    template.events?.call(template, mixin.events)

  template

有关详情和示例,请参阅我的other answer

答案 2 :(得分:1)

最近,我在我的应用程序中需要相同的功能,所以我决定创建我自己的包,它将开箱即用。虽然它仍在进行中,但你可以试一试。

基本上,整个方法如下:

// Defines new method /extend
Template.prototype.copyAs = function (newTemplateName) {
    var self = this;

    // Creating new mirror template
    // Copying old template render method to keep its template
    var newTemplate = Template.__define__(newTemplateName, self.__render);
    newTemplate.__initView = self.__initView;

    // Copying helpers
    for (var h in self) {
        if (self.hasOwnProperty(h) && (h.slice(0, 2) !== "__")) {
            newTemplate[h] = self[h];
        }
    }

    // Copying events
    newTemplate.__eventMaps = self.__eventMaps;

    // Assignment
    Template[newTemplateName] = newTemplate;
};

在你想要扩展抽象概念的新模板(new_template.js)中,写下以下内容:

// this copies your abstract template to your new one
Template.<your_abstract_template_name>.copyAs('<your_new_template_name>');

现在,您可以通过执行以下操作,覆盖您的帮助程序或事件(在我的情况下是photos帮助程序):

Template.<your_new_template_name>.photos = function () {
    return [];
};

您将参考覆盖的辅助方法并抽象未覆盖的方法。

请注意,新模板的HTML文件不是必需的,因为我们始终引用抽象文件。

源代码可在Github here上找到!