Meteor Block Helper 就像一个模板

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 给出的实现非常酷，但是无法从下面的content内访问 expanded 助手：

<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 中调用，因此即使console.log() 调用也不会触发.

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>