Handlebars.js基於值/對的JSON設置類

剛剛開始查看Handlebars.js，希望得到一個明確的方法。假設如下：我們無法控制JSON的創建方式（因此沒有服務器端解決方案）。 JSON將有1個或更多記錄。在每條記錄中，都會有一個Message_Type名稱/值對，其值在演示文稿中使用css類的某些函數中很有用。例如：Handlebars.js基於值/對的JSON設置類

例如：message_type：basic，ad，notification，warning，critical。每個message_type將有一個css類（es）。所以關鍵的消息類型可能會得到類.msg_box .critical_msg。

我應該怎麼做（請記住，我們無法更改原始來源）。選項1：在句柄之前處理json數據，併爲每個包含相應類的名稱/值對添加名稱/值對。選項2：在處理酒吧的某種方式，我不清楚。

來源

2014-09-25 FreddyNoNose

我相信handlebars約定會解析您的JSON並將其傳遞給Handlebars模板之前，將相應的類名稱添加到生成的對象。 Handlebars can be hacked to include the necessary logical operators，但我認爲它通常是皺眉。

var messageMapping = { 
 
    basic: 'msg_box', 
 
    ad: 'msg_box', 
 
    notification: 'msg_box', 
 
    warning: 'critical_msg', 
 
    critical: 'critical_msg' 
 
}; 
 

 
//Your data from the server 
 
var yourJSON = '[{"message_type":"basic", "value":"test"},{"message_type":"warning", "value":"test"}]'; 
 

 
var data = JSON.parse(yourJSON), 
 
    i = 0, 
 
    l = data.length; 
 

 
//Update the class names 
 
for(; i < l; i++){ 
 
    data[i].msgClass = messageMapping[data[i].message_type]; 
 
} 
 

 
//Add to the DOM 
 
var source = $('#template').html(); 
 
var template = Handlebars.compile(source); 
 

 
$('body').append(template({messages:data}));

.critical_msg{ 
 
    background-color:red; 
 
} 
 

 
.msg_box{ 
 
    background-color:green; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script id='template' type='template/text'> 
 
{{#each messages}} 
 
    <div class="{{msgClass}}">{{value}}</div> 
 
{{/each}} 
 
</script>

來源

2014-09-25 00:32:07

這個工程非常漂亮。我認爲在傳遞給handlebars之前解析json是一種方法，但它聽起來像是標準方法。非常感謝你！ – FreddyNoNose 2014-09-25 03:44:40

我想+1，但我還不能。所以謝謝。 – FreddyNoNose 2014-10-10 19:10:19

把手設計相當「邏輯少」，這意味着它沒有配備內置的功能，使基於其他經過了比簡單的if數據決策依據是數據中是否存在或不存在。根據某些數據結構元素的值決定放入HTML的類別不是內置功能。

這樣你的選擇是：

假設模板正在使用的客戶端，您可以預先處理在客戶端的JSON把它變成一個沒有邏輯需要的表格前，它被髮送到模板。
創建助手方法，您可以將數據傳遞給它們，並且可以根據此方法做出決策，並將其傳遞迴模板。
添加可以添加邏輯功能到你的模板的幫助方法（你可以找到一些預建的方法）。
切換到內置了更多的邏輯功能的模板引擎。

來源

2014-09-25 03:29:33 jfriend00

正如我在回答其他答案時一樣，我最初想到的首先解析json的想法就是要走的路。 – FreddyNoNose 2014-09-25 07:13:18

我想+1，但我還不能。所以謝謝。 – FreddyNoNose 2014-10-10 19:11:21

@FreddyNoNose - 您可以通過選擇該答案左側的綠色複選標記來選擇其中一個答案作爲「最佳答案」的選項。 – jfriend00 2014-10-10 19:24:44

Handlebars.js基於值/對的JSON設置類

回答

相關問題