私は口ひげを使用しています。通知のリストを生成しています。通知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 .....の場合.
それはどのように機能しますか?
口ひげテンプレートは、設計上、非常に単純です。 ホームページ さえ言う:
ロジックレステンプレート。
したがって、一般的なアプローチは、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機能を利用できます。
口ひげのドキュメントに目を通すだけで、彼らは「反転セクション」をサポートしています
キーが存在しないか、falseであるか、空のリストである場合、それら(反転セクション)がレンダリングされます
http://mustache.github.io/mustache.5.html#Inverted-Sections
{{#value}}
value is true
{{/value}}
{{^value}}
value is false
{{/value}}
一般的に、#
構文:
{{#a_boolean}}
I only show up if the boolean was true.
{{/a_boolean}}
目標は、テンプレートから可能な限り多くのロジックを移動することです(これは理にかなっています)。
私は、口ひげで(そして非常に読みやすい方法で)ブール値のみの代わりにキー/値の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}}