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

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 友好替代方案是声明一个助手并使用它来选择要呈现的模板。它变得有点复杂，但如果这是您无法更改的内容，您可以避免从 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，使用部分来渲染您可以拥有的每种类型的事件（即 {{>partial}} 表示法）。

这里唯一难看的部分是您需要将此 event_renderer 成员添加到您的 JSON 数据中，但除此之外，一切都应该没问题（在 Handlebars 中，您可以将其声明为助手，不需要将其与您的数据合并）。