Javascript-Funktion innerhalb des jQuery-Templates

Question

Es scheint, dass ich Probleme habe, eine JavaScript-Funktion innerhalb eines jQuery-Templates aufzurufen. Ich habe hier eine Demo eingerichtet: http://jsfiddle.net/SXvsZ/8/

Der Code sieht so aus:

function htmlDetail(){
   return "hello world"; 
}

var book = [
    { title: "Gute Nacht, Welt!",
  detail: { author: "Jojo Mojo", synopsis : "Was ist das ..." }},
{ title: "Regenbogen",
  detail: { author: "Cookie", synopsis : "Hä?" }}
];

$("#testTemplate").tmpl(book).appendTo("#bookList");

Und das Template sieht so aus:

    {{if title.length}}
      <h3>${title}</h3>
      <p>Start: ${ htmlDetail() } :End</p>
    {{/if}}

Es scheint, als sollte "hello world" gerendert werden. Ich möchte auch, dass es das HTML als HTML und nicht als reinen Text rendert.

Answer 1

Um HTML im Template aus einer anderen Funktion zu rendern, müssen Sie das {{html}} Template-Tag verwenden.

    {{if title.length}}
      <h3>${title}</h3>
      <p>Start: {{html htmlDetail() }} :End</p>
    {{/if}}

Sie sollten die htmlDetail-Funktion auch außerhalb Ihrer ready() Funktion verschieben

Answer 2

Zurück zu Ihrer Frage, das Problem scheint zu sein, dass htmlDetail vor der Vorlage selbst definiert werden muss. (ihre Beispiele 'deuten darauf hin')

Es funktioniert hier: http://jsfiddle.net/SXvsZ/9/

Answer 3

http://api.jquery.com/template-tag-html/

Hinweis dies sind sowieso die Beta-Versionen, also sind sie nicht finalisiert und könnten sich wahrscheinlich ändern oder sogar veraltet sein, also verlassen Sie sich noch nicht zu sehr darauf, aber experimentieren Sie damit :)

Answer 4

Sie können die a non global Funktion an das Template übergeben, um sie im Template verfügbar zu machen, wenn Sie sich dagegen entscheiden, sie global zu machen.

$("#testTemplate").tmpl(book, {htmlDetail : htmlDetail} ).appendTo("#bookList");

Es kann wie folgt verwendet werden, {{html}} wird es ohne Codierung rendern

 Start: {{html $item.htmlDetail() }} :End