web-dev-qa-db-fra.com

Comment gérer un IF STATEMENT dans un modèle Moustache?

J'utilise la moustache. Je génère une liste de notifications. Un objet JSON de notification se présente comme suit:

[{"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 moustache, comment puis-je faire une déclaration if ou une déclaration case basée sur le notified_type & action...

Si notified_type == "Friendship" rendu ......

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

Comment ça marche?

javascripttemplatesmustache
49
AnApprentice

Les modèles de moustache sont, par leur conception, très simples; le homepage dit même:

Modèles sans logique.

L’approche générale consiste donc à faire votre logique en JavaScript et à définir de nombreux 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 voulez des fonctionnalités plus avancées mais que vous voulez conserver la plus grande simplicité de Moustache, vous pouvez regarder Guidon :

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

Les modèles Moustache sont compatibles avec le guidon, vous pouvez donc en prendre un, l’importer dans le guidon et commencer à tirer parti des fonctionnalités supplémentaires du guidon.

61
mu is too short

Je viens de jeter un coup d’œil sur la documentation de la moustache et ils prennent en charge les "sections inversées" dans lesquelles ils indiquent

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

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

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

Le but est de déplacer autant de logique que possible hors du modèle (ce qui est logique).

32
Dave Newton

J'ai un hack simple et générique pour effectuer l'instruction key/value if au lieu de boolean-only dans moustache (et de 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"
};

Ressemblera à ceci 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}}
11
François Dispaux