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设置类

回答

相关问题