流星块助手，其作用类似于一个模板

Question

这就是我想要的，一个自定义模块的辅助，可以像一个模板，监测它自己的事件等产生的HTML代码如下所示：

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

而这里的一些JavaScript我放在一起。如果我只是将上面的模板声明为模板，但是我希望它适用于给予该块帮助器的任何输入。

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访问：

​​

在实际块帮手，expanded是未定义，因为真实的东西是上下文中的一个层次。我尝试了诸如{{../expanded}}和{{this.expanded}}之类的东西，但无济于事。

奇怪的是，事件处理程序正确连接了....当我点击该按钮，它触发，但expanded助手就是简单从来没有从content中调用，所以即使console.log()调用从未被触发。

Answer 1

流星的新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>