Comment gérer une déclaration IF dans un modèle Mustache ?

Question

J'utilise la moustache. Je génère une liste de notifications. Un objet JSON de notification ressemble à :

[{"id":1364,"read":true,"author_id":30,"author_name":"Mr A","author_photo":"image.jpg","story":"wants to connect","notified_type":"Friendship","action":"create"}]

Avec mustache, comment puis-je faire un if ou un case statement basé sur le notified_type & action ...

Si notified_type == "Friendship" Rendu ......

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

Comment cela fonctionne-t-il ?

Answer 1

J'ai jeté un coup d'œil sur la documentation de Moustache et ils supportent les "sections inversées" dans lesquelles ils déclarent que

elles (sections inversées) seront rendues si la clé n'existe pas, est fausse ou est une liste vide.

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

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

Answer 2

Les modèles de moustaches sont, de par leur conception, très simples. page d'accueil même dit :

Modèles sans logique.

L'approche générale est donc de faire votre logique en JavaScript et de définir un certain nombre de drapeaux :

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

et ensuite dans votre modèle :

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

Si vous souhaitez disposer de fonctionnalités plus avancées tout en conservant la simplicité de Mustache, vous pouvez vous tourner vers les solutions suivantes Guidon :

Handlebars fournit la puissance nécessaire pour vous permettre de construire des modèles sémantiques de manière efficace et sans frustration.

Les modèles Mustache sont compatibles avec Handlebars, vous pouvez donc prendre un modèle Mustache, l'importer dans Handlebars et commencer à profiter des fonctionnalités supplémentaires de Handlebars.

Answer 3

En général, vous utilisez le # la syntaxe :

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

L'objectif est de déplacer autant de logique que possible hors du modèle (ce qui est logique).

Answer 4

J'ai un hack simple et générique pour exécuter l'instruction if clé/valeur au lieu de l'instruction boolean-only dans mustache (et d'une manière extrêmement lisible !) :

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

Avec ce hack, un objet comme celui-ci :

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

Il ressemblera à ça avant la 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
};

Et votre modèle de moustache ressemblera à ceci :

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

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