是否可以将变量传递给小胡子部分答案

【问题标题】：Is it possible to pass variables to a mustache partial是否可以将变量传递给小胡子部分
【发布时间】：2018-09-16 06:07:39
【问题描述】：

假设我有一个像这样的小胡子按钮部分

<button name="{{name}}" class="btn">{{title}}</button>

像这样直接调用部分时是否可以通过某种方式设置标题

<form>
....
{{> button|name=foo,title=Cancel}} {{> button|name=bar,title=Submit}}
</form>

这样可以更轻松地创建视图，而不是像这样为每个按钮创建哈希。

<form>
....
{{#buttons}}
    {{> button}}
{{/buttons}}
</form>

【问题讨论】：

标签： templates mustache

【解决方案1】：

我不确定你能做到这一点，但我使用 mustache 函数解决了这个问题

javascript

var partial = "<div>{{value}}</div>";
var data = {some_data:[1,2,3]};
var items = {func:function (){
    return function (index){
        return mustache.render(partial,{value : data.some_data[index]});
    }
});
mustache.render(main,items);

小胡子

{{#func}}1{{/func}}
{{#func}}2{{/func}}

【讨论】：

【解决方案2】：

在普通的 Mustache 中不可能做到这一点，但在带有助手的 Handlebars 中是可行的。 Handlebars 是 Mustache 的扩展，因此您只需更换解析器库即可切换到它。以下是它在 Handlebars 中的外观：

JS Helper（还有许多其他语言的实现）：

Handlebars.registerHelper('button', function(title, options) {
    var attrs = Em.keys(options.hash).map(function(key) {
        key + '="' + options.hash[key] + '"';
    }).join(" ");
    return new Handlebars.SafeString(
      "<button " + attrs + ">" + title + "</button>");
});

在模板中的使用：

{{buttton title name="name" class="class"}}

更多信息在这里：http://handlebarsjs.com/

【讨论】：

【解决方案3】：

不，您不能使用 Mustache 直接从模板传递变量视图数据。

但是，在使用 Mustache 时，使用列表将按钮呈现为一个部分是一种合适的替代方案：

部分：(buttons.mst)

{{#buttons}}
  <button name="{{name}}" class="btn">{{title}}</button>
{{/buttons}}

模板：

<form>
  ...

  {{> buttons}}
</form>

查看：

buttons: [
  { name: 'foo', title: 'Cancel' },
  { name: 'bar', title: 'Submit' },
]

输出：

<form>
  ...

  <button name="foo" class="btn">Cancel</button>
  <button name="bar" class="btn">Submit</button>
</form>

实际上效果很好，因为如果没有传递任何按钮，则不会呈现部分。

希望对你有帮助。

【讨论】：