6

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>

「helloworld」をレンダリングする必要があるようです。HTMLもプレーンテキストではなくhtmlとしてレンダリングしたいと思います。

4

4 に答える 4

10

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

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

また、ready() 関数の外に htmlDetail 関数を移動する必要があります。

于 2011-01-20T03:12:59.890 に答える
2

質問に戻ると、問題はhtmlDetailテンプレート自体の前に定義する必要があるようです。（彼らの例はそれを「示唆」しています）

ここで動作します: http://jsfiddle.net/SXvsZ/9/

于 2011-01-20T01:57:06.050 に答える
1

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

これはとにかくベータ版であることに注意してください。それらは最終化されておらず、変更されるか、非推奨になる可能性が高いので、今のところあまり依存しないでください。ただし、試してみてください:)

于 2011-01-20T01:37:28.513 に答える
0

グローバルにしないことを選択した場合は、非グローバル関数をテンプレートに渡して、テンプレート内で使用できるようにすることができます。

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

このように使用できます。{{html}} はエンコードなしでレンダリングします

 <p>Start: {{html $item.htmlDetail() }} :End</p>
于 2011-01-20T21:35:38.413 に答える