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

好的，所以我试图抓住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'}} ] }

有没有更好的方式解决这个问题，而不重构我的数据？还是应该咬一口子弹？

来源

2012-02-06 Arvid Janson

小胡子是逻辑较少的，所以除了切换到Handlebars以外，用纯模板代码可以做的事情不多。

你的胡须友好的替代方法是声明一个助手并用它来选择要渲染的模板。它变得有点令人费解，但你能避免胡子切换的路程，如果这东西你不能改变：

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来呈现您可以拥有的每种类型的事件（这是{{> partial}}表示法）。

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

来源

2012-02-06 17:26:10 gonchuki

我接受了你的答案，但你介意给我一些输入吗？我正在寻找一个简单的诱人系统，但目前我可以自由地去任何一种方式 - API仍在构建之中，而且还没有构建实际的GUI部件。你会推荐带胡子的胡子吗？或者另一个图书馆在一起？ – 2012-02-06 18:52:47

对于这个特定的例子，区别在于你可以在''hand_list.registerHelper''中全局注册你的'event_renderer'助手，并且避免每次你有一些新的数据要渲染时混入这个函数。简而言之，Handlebars上没有语法可用于根据其中一个成员的值渲染一个或另一个部分，但只能测试真实值和虚假值。 – gonchuki 2012-02-06 19:10:06

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

回答

相关问题