Übergeben Sie eine Funktion in eine LENKER-Vorlage

Bin ich mit (oder zumindest ab) HandlebarsJS für die html-templates, aber ich könnte getroffen haben, in einer Sackgasse. Was ich will ist die übergabe einer Funktion an der Vorlage, z.B.

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

dann würde ich erwarten, dass so etwas wie 

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

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

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

Aber die Funktion, die ausgeführt wird auf init, es ist nicht an die Vorlage und das Ergebnis ist: 

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

Ich habe versucht einige Sachen mit den Hilfsfunktionen als gut, aber ich konnte nicht machen es zu arbeiten. Irgendwelche Ideen würde geschätzt. 🙂

InformationsquelleAutor isHristov | 2012-09-19

  1. 14

    Die Lösung ist ziemlich einfach.

    LENKER wird die Ausgabe der Eigenschaften des Objekts, das Sie vorbei sind in den Vorlagen, wenn die Eigenschaft eine Funktion, es wird ausgeführt, die Funktion und Ausgabe der zurückgegebene Wert

    In deinem Beispiel die Funktion zurück nicht einen beliebigen Wert (es ruft einfach nur Alarm), so ist die Ausgabe leer.

    Könnten Sie eine helper-Methode wie diese:

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

    Dann innerhalb der Vorlage, die Sie gerade brauchen, um verwenden Sie es auf die Funktion an, die benötigt werden stringified:

    <div id="divTemplate">
  <span onclick="{{stringifyFunc func}}">{{text}}</span>
</div>
    Ich bekomme immer "Unerwartetes token (" mit der data variable (mit der Funktion) von meinem Beispiel, sollte ich es auf etwas anderes?
    Vergessen wickeln Sie es in eine Schließung, werden Sie auch brauchen, um einige entkommen, hier ist ein arbeiten fiddle: jsfiddle.net/fHycd
    Danke Kamerad, du warst sehr hilfreich! 🙂

    InformationsquelleAutor BFil

  2. 0

    Können Sie auch global definierte callback-Funktion, und übergeben Sie aufrufenden Funktion string in der onclick-Wert in der Vorlage.

    Hinweis: die Klammer mit der tmpCallback für func Wert in Datenobjekt.

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

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

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

    Dies ist nur ein hack für schnelle Abhilfe, und ich denke, die Antwort von @BFil werden kann, eine bessere.

    InformationsquelleAutor Satys

Schreibe einen Kommentar