Question

这是我的问题：

模板文件中的

：

<template name="button">
     <button class="btn-class">{{disp}}</button>
</template>

在js：

Template.button.events({
    'click': function(event, templ) {
         if (this.onClick) {
             this.onClick();
         }
    }
})

在其他模板中使用＆＃39;按钮＆＃39;：

<template name="buttonGroup">
     {{> button disp='button 1' onClick=onButton1Click}}
     {{> button disp='button 2' onClick=onButton2Click}}
</template>

及其js：

Template.buttonGroup.helpers({
    onButton1Click: function() {
        console.log('button 1 is clicked');
    },
    onButton2Click: function() {
        console.log('button 1 is clicked');
    },
});

显然，它无法正常工作，因为模板buttonGroup会传递＆＃39; onButton1Click（）＆＃39;按钮，而不是功能，但结果（返回＆＃39; undefined＆＃39;）。

那么我怎么做才能让meteor将辅助函数作为参数传递给子模板？

Answer 1

使用全局函数字典是一种选择吗？

JS：

var fns = {
    onButton1Click: function(self) {
         // use self instead of this here
        console.log('button 1 is clicked');
    },
    onButton2Click: function(self) {
        console.log('button 1 is clicked');
    }
}

Template.button.events({
    'click': function(event, templ) {
         if (this.onClick) {
             fns[this.onClick](this);
         }
    }
})

HTML保持不变。

Answer 2

返回帮助程序中的函数，而不是直接放置要执行的代码：

Template.buttonGroup.helpers({
  onButton1Click: function() {
    return function(event, template){
      console.log('button 1 is clicked');
    };
  },
  onButton2Click: function() {
    return function(event, template){
      console.log('button 1 is clicked');
    };
  }
});

Template.button.events({
  "click": function(event, template) {
    if (this.onClick) {
      this.onClick(event, template);
    }
  }
});

如何将流星模板助手作为参数传递给流星事件处理程序？

2 个答案: