Как обращаться с IF STATEMENT в шаблоне Mustache?

Я использую усы. Я генерирую список уведомлений. Объект уведомления 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"}]

С усами, как я могу сделать оператор if или case, основанный на notified_type и действии...

Если notified_type == "Дружба" делает......

Если notified_type == "Другое && action ==" пригласить "render.....

Как это работает?

Ответ 1

Шаблоны Усы, по дизайну, очень просты; домашняя страница даже говорит:

Логические шаблоны.

Итак, общий подход заключается в том, чтобы сделать вашу логику в JavaScript и установить кучу флагов:

if(notified_type == "Friendship")
    data.type_friendship = true;
else if(notified_type == "Other" && action == "invite")
    data.type_other_invite = true;
//...

а затем в вашем шаблоне:

{{#type_friendship}}
    friendship...
{{/type_friendship}}
{{#type_other_invite}}
    invite...
{{/type_other_invite}}

Если вы хотите более продвинутую функциональность, но хотите сохранить большую часть простоты Усы, вы можете посмотреть Handlebars:

Handlebars обеспечивает необходимую мощность, позволяющую эффективно создавать семантические шаблоны без каких-либо разочарований.

Шаблоны Mustache совместимы с Handlebars, поэтому вы можете взять шаблон Mustache, импортировать его в Handlebars и начать использовать дополнительные функции Handlebars.

Ответ 2

Просто взглянул на документы усов и они поддерживают "перевернутые разделы", в которых они указывают

они (инвертированные разделы) будут отображаться, если ключ не существует, является ложным или представляет собой пустой список

http://mustache.github.io/mustache.5.html#Inverted-Sections

{{#value}}
  value is true
{{/value}}
{{^value}}
  value is false
{{/value}}

Ответ 3

В общем, вы используете синтаксис #:

{{#a_boolean}}
  I only show up if the boolean was true.
{{/a_boolean}}

Цель состоит в том, чтобы перемещать как можно больше логики из шаблона (что имеет смысл).

Ответ 4

У меня есть простой и общий хак для выполнения инструкции key/value if вместо boolean-only в усах (и в чрезвычайно читаемом виде!):

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

С помощью этого хака объект вроде этого:

var contact = {
  "id": 1364,
  "author_name": "Mr Nobody",
  "notified_type": "friendship",
  "action": "create"
};

Будет выглядеть так до преобразования:

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

И ваш шаблон усы будет выглядеть так:

{{#notified_type=friendship}}
    friendship…
{{/notified_type=friendship}}

{{#notified_type=invite}}
    invite…
{{/notified_type=invite}}