Passage d'une fonction dans un modèle de Guidon

Je suis en utilisant (ou au moins commencer avec) HandlebarsJS pour les templates html, mais je pourrais avoir frappé une impasse. Ce que je veux, c'est passer d'une fonction à la le modèle, par exemple

<div id="divTemplate">
  <span onclick="{{func}}">{{text}}</span>
</div>

et puis je m'attends à avoir quelque chose comme

var source = $('#divTemplate').html();
var template = Handlebars.compile(source);

var data = {
  "text": "Click here",
  "func": function(){
    alert("Clicked");
  }
};

$('body').append(template(data));

Mais la fonction est exécutée sur init, il n'est pas passé dans le modèle et le résultat est:

<span onclick="">Click here</span>.

J'ai essayé quelques trucs avec les fonctions d'assistance, mais je ne pouvais pas le faire fonctionner, trop. Toutes les idées seront les bienvenues. 🙂

OriginalL'auteur isHristov | 2012-09-19

  1. 14

    La solution est assez simple.

    Guidon permet d'afficher les propriétés de l'objet que vous êtes de passage dans les modèles, si la propriété est une fonction, il exécutera la fonction et de sortie la valeur retournée

    Dans votre exemple, la fonction ne retourne aucune valeur (juste les appels d'alerte), de sorte que la sortie est vide.

    Vous pouvez créer une méthode d'assistance comme ceci:

    handlebars.registerHelper('stringifyFunc', function(fn) {
    return new Handlebars.SafeString("(" + 
               fn.toString().replace(/\"/g,"'") + ")()");
});

    Puis de l'intérieur le modèle que vous avez juste besoin de l'utiliser sur la fonction qui doit être stringified:

    <div id="divTemplate">
  <span onclick="{{stringifyFunc func}}">{{text}}</span>
</div>
    Je reçois des "Unexpected token (" avec le data variable (qui contient la fonction) à partir de mon exemple, dois-je le changer pour quelque chose d'autre?
    Oublié l'envelopper dans une clôture, vous aurez également besoin de faire quelques échapper, voici un travail de violon: jsfiddle.net/fHycd
    Grâce pal, vous avez été extrêmement utile! 🙂

    OriginalL'auteur BFil

  2. 0

    Vous pouvez également faire global défini en fonction de rappel, et de passer d'appel de fonction chaîne dans le onclick de la valeur dans le modèle.

    Note la parenthèse avec le tmpCallback pour func valeur dans les données de l'objet.

    var tmpCallback = function () {
    alert('hello');
}

var data = {
  "text": "Click here",
  "func": "tmpCallback()"
};

$('body').append(template(data));

    C'est juste un hack pour la solution de contournement rapide, et je pense que la réponse par @BFil peut être un meilleur.

    OriginalL'auteur Satys