web-dev-qa-db-ja.com

MoustacheテンプレートでIFステートメントを処理する方法は？

私は口ひげを使用しています。通知のリストを生成しています。通知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"}]

口ひげで、notified_type＆action...に基づいてifステートメントまたはcaseステートメントを実行するにはどうすればよいですか？.

notified_type == "Friendship"がレンダリングされた場合......

notified_type == "Other && action == "invite" render .....の場合.

それはどのように機能しますか？

javascripttemplatesmustache
49
AnApprentice

口ひげテンプレートは、設計上、非常に単純です。 ホームページ さえ言う：

ロジックレステンプレート。

したがって、一般的なアプローチは、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}}

より高度な機能が必要だが、Mustacheのシンプルさのほとんどを維持したい場合は、 Handlebars を見ることができます。

Handlebarsは、セマンティックテンプレートをフラストレーションなしで効果的に構築するために必要なパワーを提供します。

MoustacheテンプレートはHandlebarsと互換性があるため、Mustacheテンプレートを取得してHandlebarsにインポートし、追加のHandlebars機能を利用できます。

61
mu is too short

口ひげのドキュメントに目を通すだけで、彼らは「反転セクション」をサポートしています

キーが存在しないか、falseであるか、空のリストである場合、それら（反転セクション）がレンダリングされます

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

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

一般的に、#構文：

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

目標は、テンプレートから可能な限り多くのロジックを移動することです（これは理にかなっています）。

32
Dave Newton

私は、口ひげで（そして非常に読みやすい方法で）ブール値のみの代わりにキー/値の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}}
11
François Dispaux