web-dev-qa-db-fra.com

Appeler Helper dans If Block dans le modèle de guidon

Je travaille avec le moteur de modèle Handlebars.js et j'essaie de trouver un moyen de faire quelque chose comme ça (exemple artificiel):

{{#if itemSelected "SomeItem"}}
    <div>This was selected</div>
{{/if}

où itemSelected est un assistant enregistré comme celui-ci:

Handlebars.registerHelper("itemSelected", function(item) {
    var selected = false;
    // Lots of logic that determines if item is selected
    return selected;
});

Je reçois des erreurs en essayant d'utiliser cette syntaxe pour le modèle, et je ne trouve aucun exemple montrant ce genre de chose. Je vois de simples blocs #if comme celui-ci ...

{{#if myValueInContext}}
    <div>This will show if myValueInContext results in a truthy value.</div>
{{/if}}

Mais, je ne sais pas comment aborder le premier exemple. Je m'approche peut-être mal de cela.

Soit dit en passant, j'ai marqué cette moustache car je ne pouvais pas ajouter de balise de guidon à la question.

javascripthandlebars.jsclient-templates
34
Kevin

Je ne pense pas que cela fonctionnera. Si je comprends bien la documentation du guidon, le #if est un assistant de bloc enregistré lui-même et ne prend pas un autre assistant enregistré comme argument.

Selon la documentation, vous pourriez l'implémenter comme ça


Handlebars.registerHelper('ifItemSelected', function(item, block) {
  var selected = false;
  // lots of logic that determines if item is selected

  if(selected) {
    return block(this);
  }
});

Ensuite, vous devriez pouvoir l'appeler avec


{{#ifItemSelected SomeItem}}
    This was selected
{{/ifItemSelected}

mais vous devez vous assurer que SomeItem a le bon format. Je ne vois pas de moyen d'utiliser un gestionnaire enregistré comme conditionnel dans une instruction if.

36
Steffen

Vous devez ajouter des parenthèses autour de l'invocation d'aide intégrée:

{{#if (itemSelected "SomeItem")}}
    <div>This was selected</div>
{{/if}

J'ai fait des expériences et vérifié que cela fonctionne.

Je ne sais pas si cela est mentionné dans la documentation du guidon. J'ai appris l'astuce à partir des exemples de guidons-dispositions .

97
gnowoel

Avec la dernière version (1.0.rc.1) des guidons, vous devez écrire qq comme:

Handlebars.registerHelper('ifItemSelected', function(item, options) {
  var selected = false;
  // lots of logic that determines if item is selected

  if (selected) {
    return options.fn(this);
  }
});

c'est à dire. block (this) est remplacé par options.fn (this)

http://handlebarsjs.com/block_helpers.html#conditionals

44
jgraglia

Si vous souhaitez également avoir une option else, vous aurez besoin de ce code:

Handlebars.registerHelper('ifItemSelected', function(item, options) {
  var selected = false;
  // lots of logic that determines if item is selected

  if (selected) {
    return options.fn(this);
  }
  else {
   return options.inverse(this);
 }
});

Utilisé avec:

{{#ifItemSelected SomeItem}}
    This was selected
{{else}}
    This was not selected
{{/ifItemSelected}
5
Fiona - myaccessible.website