更新

Question

这就是我想要的，一个自定义块帮助器，可以像模板一样，监视它自己的事件等.html看起来像这样：

{{#expandable}}
    {{#if expanded}}
        Content!!!
        <div id="toggle-area"></div>
    {{else}}
        <div id="toggle-area"></div>
    {{/if}}
{{/expandable}}

这是我放在一起的一些JavaScript。如果我只是将上面的内容声明为模板，那么这将有效，但我希望它适用于给expandable块帮助器的任何输入。

Template.expandableView.created = function() {
    this.data._isExpanded = false;
    this.data._isExpandedDep = new Deps.Dependency();
}
Template.expandableView.events({
    'click .toggle-area': function(e, t) {
        t.data._isExpanded = !t.data._isExpanded;
        t.data._isExpandedDep.changed();
    }
});
Template.expandableView.expanded = function() {
    this._isExpandedDep.depend();
    return this._isExpanded;
};

我知道我可以使用如下语法声明块助手：

Handlebars.registerHelper('expandable', function() {
    var contents = options.fn(this);
    // boring block helper that unconditionally returns the content
    return contents;
});

但那不会有模板行为。

提前致谢！对于当前的Meteor实现，这可能不太可能。

更新

HubertOG提供的实施非常酷，但expanded帮助器无法从下面的content访问：

<template name="expandableView">
    {{expanded}} <!-- this works correctly -->
    {{content}}
</template>

<!-- in an appropriate 'home' template -->
{{#expandable}}
    {{expanded}} <!-- this doesn't work correctly. Expanded is undefined. -->
    <button class="toggle-thing">Toggle</button>
    {{#if expanded}}
        Content is showing!
    {{else}}
        Nope....
    {{/if}}
{{/expandable}}

在实际的块助手中，expanded未定义，因为真实的是上下文中的级别。我尝试了{{../expanded}}和{{this.expanded}}之类的内容，但无济于事。

奇怪的是，事件处理程序已正确连接....当我单击该按钮时它会触发，但expanded助手从未在content内调用，所以即使{{1调用永远不会被解雇。

Answer 1

Meteor的新Blaze template engine很好地解决了这个问题。

以下是Blaze文档的摘录，展示了如何使用它们。

定义：

<template name="ifEven">
  {{#if isEven value}}
    {{> UI.contentBlock}}
  {{else}}
    {{> UI.elseBlock}}
  {{/if}}
</template>

Template.ifEven.isEven = function (value) {
  return (value % 2) === 0;
}

用法：

{{#ifEven value=2}}
  2 is even
{{else}}
  2 is odd
{{/ifEven}}

Answer 2

您可以通过创建一个返回模板的帮助程序，并将帮助程序选项作为数据传递给该模板来实现此目的。

首先，制作你的帮助模板：

<template name="helperTemplate">
  <div class="this-is-a-helper-box">
    <p>I'm a helper!</p>
    {{helperContents}}
  </div>
</template>

这将作为一个典型的模板，即它可以响应事件：

Template.helperTemplate.events({
  'click .click-me': function(e, t) {
    alert('CLICK!');
  },
});

最后，制作一个将返回此模板的帮助器。

Handlebars.registerHelper('blockHelper', function(options) {
  return new Handlebars.SafeString(Template.helperTemplate({
    helperContents: new Handlebars.SafeString(options.fn(this)),
  }));
});

帮助程序选项在模板数据中作为helperContents参数传递。我们在模板中使用该参数来显示内容。另请注意，在模板助手及其数据的情况下，您需要将返回的HTML代码包装在Handlebars.SafeString中。

然后您可以按预期使用它：

<template name="example">

  {{#blockHelper}}
    Blah blah blah
    <div class="click-me">CLICK</div>
  {{/blockHelper}}

</template>

Meteor Block Helper就像一个模板

更新

2 个答案: