【问题标题】: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>
        

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

        希望对你有帮助。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-09-25
          • 1970-01-01
          • 1970-01-01
          • 2019-04-19
          • 2012-12-02
          • 1970-01-01
          相关资源
          最近更新 更多