Как работать с IF-заявлением в шаблоне усов?

Question

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

Если notified_type == "Friendship" рендер ......

Если notified_type == "Other && action == "invite" визуализировать .....

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

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

Answer 2

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

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

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

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

Answer 3

Как правило, вы используете синтаксис #:

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

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

Answer 4

У меня есть простой и общий хак для выполнения оператора ключ / значение if вместо логического выражения только для усов (и чрезвычайно читабельным способом!):

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