Javascript 如何处理 Mustache 模板中的 IF 语句？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8548943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to handle an IF STATEMENT in a Mustache template?
提问by AnApprentice
I'm using mustache. I'm generating a list of notifications. A notification JSON object looks like:
我正在使用小胡子。我正在生成通知列表。通知 JSON 对象如下所示：
[{"id":1364,"read":true,"author_id":30,"author_name":"Mr A","author_photo":"image.jpg","story":"wants to connect","notified_type":"Friendship","action":"create"}]
With mustache, how can I do a if statement or case statement based on the notified_type& action...
有了小胡子，我如何基于notified_type&做 if 语句或 case 语句action？
If notified_type == "Friendship"render ......
如果notified_type == "Friendship"渲染......
If notified_type == "Other && action == "invite"render.....
如果notified_type == "Other && action == "invite"渲染.....
How does that work?
这是如何运作的？
回答by mu is too short
Mustache templates are, by design, very simple; the homepageeven says:
根据设计，Mustache 模板非常简单；该网页甚至说：
Logic-less templates.
无逻辑模板。
So the general approach is to do your logic in JavaScript and set a bunch of flags:
所以一般的方法是在 JavaScript 中做你的逻辑并设置一堆标志：
if(notified_type == "Friendship")
data.type_friendship = true;
else if(notified_type == "Other" && action == "invite")
data.type_other_invite = true;
//...
and then in your template:
然后在您的模板中：
{{#type_friendship}}
friendship...
{{/type_friendship}}
{{#type_other_invite}}
invite...
{{/type_other_invite}}
If you want some more advanced functionality but want to maintain most of Mustache's simplicity, you could look at Handlebars:
如果你想要一些更高级的功能，但又想保持 Mustache 的大部分简单性，你可以看看Handlebars：
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.
Handlebars 提供了必要的功能，让您可以轻松有效地构建语义模板。
Mustache 模板与 Handlebars 兼容，因此您可以使用 Mustache 模板，将其导入 Handlebars，并开始利用额外的 Handlebars 功能。
回答by Lucas
Just took a look over the mustache docs and they support "inverted sections" in which they state
刚刚查看了 mustache 文档，他们支持他们声明的“倒置部分”
they (inverted sections) will be rendered if the key doesn't exist, is false, or is an empty list
如果键不存在、为 false 或为空列表，则它们（反转部分）将被呈现
http://mustache.github.io/mustache.5.html#Inverted-Sections
http://mustache.github.io/mustache.5.html#Inverted-Sections
{{#value}}
value is true
{{/value}}
{{^value}}
value is false
{{/value}}
回答by Dave Newton
In general, you use the #syntax:
通常，您使用以下#语法：
{{#a_boolean}}
I only show up if the boolean was true.
{{/a_boolean}}
The goal is to move as much logic as possible out of the template (which makes sense).
目标是将尽可能多的逻辑移出模板（这是有道理的）。
回答by Fran?ois Dispaux
I have a simple and generic hack to perform key/value if statement instead of boolean-only in mustache (and in an extremely readable fashion!) :
我有一个简单而通用的 hack 来执行 key/value if 语句，而不是在 mustache 中执行仅布尔值（并且以极易读的方式！）：
function buildOptions (object) {
var validTypes = ['string', 'number', 'boolean'];
var value;
var key;
for (key in object) {
value = object[key];
if (object.hasOwnProperty(key) && validTypes.indexOf(typeof value) !== -1) {
object[key + '=' + value] = true;
}
}
return object;
}
With this hack, an object like this:
有了这个 hack，一个像这样的对象：
var contact = {
"id": 1364,
"author_name": "Mr Nobody",
"notified_type": "friendship",
"action": "create"
};
Will look like this before transformation:
转换前看起来像这样：
var contact = {
"id": 1364,
"id=1364": true,
"author_name": "Mr Nobody",
"author_name=Mr Nobody": true,
"notified_type": "friendship",
"notified_type=friendship": true,
"action": "create",
"action=create": true
};
And your mustache template will look like this:
您的小胡子模板将如下所示：
{{#notified_type=friendship}}
friendship…
{{/notified_type=friendship}}
{{#notified_type=invite}}
invite…
{{/notified_type=invite}}
