Question

好的，所以我试图抓住Mustache.js来渲染javascript中的视图。我有一个返回许多“事件”的API，它可以是许多不同的类型。我想根据它们的类型以非常不同的方式呈现事件：

data : { 
  events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ] }

理想情况下，我可以这样做：

{{#events}}
    {{#message}}
         <div class="message">{{title}}</div>
    {{/message}}
    {{#image}}
         <span>{{title}}</span>
    {{/image}}
{{/events}}

但那会（对吗？）迫使我将我的数据重构为：

data : { 
  events: [ {message: {title: 'hello'}}, {image: {title: 'world'}} ] }

有没有更好的方法来解决这个问题，而无需重构我的数据？或者我应该咬紧牙关？

Answer 1

Mustache是无逻辑的，因此除了切换到Handlebars之外，您无法使用纯模板代码。

您对Mustache友好的替代方法是声明一个帮助程序并使用它来选择要呈现的模板。这有点令人费解，但如果你无法改变，你可以避免切换掉胡子：

var base_template = '{{#events}}' +
                        '{{{event_renderer}}}' +
                    '{{/events}}';
var message_template = '<div>message: {{title}}</div>';
var image_template = '<div>image: {{title}}</div>';
var data = { 
  events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ],
  event_renderer: function() {
      return Mustache.render('{{> ' + this.type  + '}}', this, {message: message_template, image: image_template});
  }
}

Mustache.render(base_template, data);

这里的技巧是你创建一个将成为迭代器的基本模板，并作为帮助者传入event_renderer。该助手将再次调用Mustache.render，使用partials渲染您可以拥有的每种类型的事件（即{{＆gt; partial}}符号）。

这里唯一丑陋的部分是你需要将这个event_renderer成员添加到你的JSON数据中，但除此之外，它应该都没问题（在Handlebars中你可以将它声明为帮助者而且没有必要将其与您的数据合并。）

是否可以在Mustache中根据哈希值切换模板部分？

1 个答案: