3

以下のように使いたいです。 

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>{{=Title}}</td>
        <td>
            {{* var title = $ctx.GetTitleFunction($view);}}
            {{#each Languages}}
                <div>                   
                    <em>{{=Name}}</em>
                    <em>({{* title;}})</em>
                </div>
            {{/each}}
        </td>
    </tr>
</script>

<script type="text/javascript">

    function GetTitle(data){
        return "Title : " + data.Title;
    }

    var movies = [
        {
            Title: "Meet Joe Black",
            Languages: [
                { Name: "English" },
                { Name: "French" }
            ]
        },
        {
            Title: "Eyes Wide Shut",
            Languages: [
                { Name: "French" },
                { Name: "Mandarin" },
                { Name: "Spanish" }
            ]
        }
    ];

    $.views.allowCode = true;
    $.views.registerHelpers({ GetTitleFunction: GetTitle });
    $( "#movieList" ).html(
        $( "#movieTemplate" ).render( movies )
    );

</script>

{{* title;}} または {{* =title}} を使用して JavaScript 変数をレンダリングすることはできません。
javascript変数で値をレンダリングするにはどうすればよいですか?

4

1 に答える 1

12

ヘルパー関数を使用してタイトルを返す方法を示すフィドルを作成しました。新しいベータ候補構文を使用して、ヘルパー関数とビュー パスを組み合わせます。これを行うためにallowCodeを使用する必要はありませんでした... allowCodeを使用すると、変数を定義してロジックを処理できますが、指定されたjavascriptへの完全なアクセスはできません(安全のため)。いずれにせよ、コードは allowCode を使用しない方がはるかにクリーンだと思いますが、呼び出しを行います :)

http://jsfiddle.net/johnpapa/LqchY/

Boris の投稿からの新しい変更に注意してください: http://www.borismoore.com/2012/03/approaching-beta-whats-ching-in_06.html

以下のコードには、次の注目すべき変更があります。

  1. 新しい構文は、{{:yourProperty}} を使用してプロパティ値をレンダリングすることです。
  2. {{#each}} は {{for}} に置き換えられました
  3. ヘルパー関数は、ctx の代わりにチルダ ~ で参照されるようになりました
  4. for ループ内では、 #view.parent または単に #parent を使用して親コンテキストにアクセスできます (ビューが暗黙的に指定されているため)。したがって、配列ループ内では、1 つの親が配列にアクセスし、別の親が配列の親にアクセスし、データがデータを取得する必要があります。少し冗長ですが、コンテキストにアクセスできます。{{:#parent.parent.data.Title}}
  5. [更新]使用するデータを渡すか、関数内の view.data にアクセスできます。

これが役立つことを願っています！

<script id="movieTemplate" type="text/x-jsrender">
    <tr>
        <td>{{:Title}}</td>
        <td>
            <!-- Use the helper function to display the title -->
            {{:~GetTitleFunction()}}
            {{for Languages}}
                <div>                   
                    <em>{{:Name}}</em>
                    <!-- Use the view path for parent. could also do #view.parent.parent.data -->
                    <em>( {{:#parent.parent.data.Title}} )</em>
                    <!-- Use the helper function and view path  -->
                    <em>{{:~GetTitleFunction(#parent.parent.data)}}</em>
                </div>
            {{/for}}
        </td>
    </tr>
</script>
于 2012-03-07T15:45:13.007 に答える