jqueryテンプレート内のjavascript関数

Question

jqueryテンプレート内でjavascript関数を呼び出すときに問題が発生しているようです。私はここで設定デモを持っている：http://jsfiddle.net/SXvsZ/8/

コードは次のようになります。

function htmlDetail(){ 
    return "hello <strong>world</strong>"; 
} 

var book = [ 
    { title: "Goodnight, World!", 
    detail: { author: "Jojo Mojo", synopsis : "What the ..." }}, 
{ title: "Rainbow", 
    detail: { author: "Cookie", synopsis : "Huh?" }} 
]; 

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

とテンプレートは以下のようになります。

<script id="testTemplate" type="text/x-jquery-tmpl"> 
    {{if title.length}} 
     <h3>${title}</h3> 
     <p>Start: ${ htmlDetail() } :End</p> 
    {{/if}} 
</script> 

<div id="bookList"></div> 

それによってレンダリングされるように "世界こんにちは" ようですHTMLをプレーンテキストではなくHTMLとしてレンダリングするようにしたいと思います。

Answer 1

別の関数からテンプレート内のHTMLをレンダリングするには、{{HTML}}テンプレートタグを使用する必要があります。

<script id="testTemplate" type="text/x-jquery-tmpl"> 
    {{if title.length}} 
     <h3>${title}</h3> 
     <p>Start: {{html htmlDetail() }} :End</p> 
    {{/if}} 
</script> 

また、あなたが作るしないことを選択した場合は、テンプレート内でそれをavialbale作るために、テンプレートに非グローバル関数を渡すことができ、あなたの準備（）関数の外側

Answer 2

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

彼らが確定されておらず、最も可能性の高い変更される可能性がありますか、そうであっても、まだofcourseののように、あまりにも多くのに依存しているが、それに実験をしない廃止されるので注意が、これはとにかくベータ版です:)

Answer 3

あなたの質問に戻って、問題は、htmlDetailは、テンプレート自体の前に定義する必要があるようだ。 （その例はそれを「示唆」）それはここで働く

：http://jsfiddle.net/SXvsZ/9/

Answer 4

をhtmlDetail機能を移動する必要がありますそれはグローバルです。

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

それがこのように使用することができ、{{HTML}}なしエンコーディング

<p>Start: {{html $item.htmlDetail() }} :End</p>