是否可以根據鬍鬚中的哈希值切換模板部分？

好的，所以我試圖抓住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

是否可以根據鬍鬚中的哈希值切換模板部分？

回答

相關問題