如何处理Mustache模板中的IF语句?

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...

有了mustache，我如何根据notified_type & action做if语句或case语句……

If notified_type == "Friendship" render ......

如果notified_type = "Friendship"渲染…

If notified_type == "Other && action == "invite" render.....

如果notified_type = "Other && action = "invite"赋予……

How does that work?

这是如何工作的呢?

4 个解决方案

#1

Mustache templates are, by design, very simple; the homepage even says:

Mustache模板设计得非常简单;首页甚至说:

Logic-less templates.

Logic-less模板。

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:

如果你想要一些更高级的功能，但是想要保持胡子的简单性，你可以看看把手:

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

handlebar提供了必要的功能，使您能够有效地构建语义模板，而不会感到沮丧。

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.

Mustache模板与Handlebars兼容，因此您可以使用Mustache模板，将其导入到Handlebars中，并开始利用额外的Handlebars特性。

#2

Just took a look over the mustache docs and they support "inverted sections" in which they state

只要看一眼胡子医生，他们就会支持“倒置的部分”。

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}}

#3

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).

目标是将尽可能多的逻辑移出模板(这是有意义的)。

#4

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!) :

我有一个简单而通用的方法来执行key/value if语句而不是booleonly(而且是以一种非常可读的方式):

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:

有了这个技巧，像这样的对象:

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}}

#1