Как использовать переменные JavaScript в jsRender?

Я хочу использовать следующим образом.

<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?

1 ответ

Я создал скрипку, чтобы показать вам, как использовать вспомогательную функцию для возврата заголовка. Он объединяет вспомогательные функции и пути просмотра, используя новый синтаксис бета-кандидатов. Мне не нужно было использовать allowCode для этого... allowCode позволяет вам определять переменные и логику процесса, но это не полный доступ к данному javascript (для безопасности). Несмотря на это, я думаю, что код без чище без кода кода, но вы делаете вызов:)

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

Обратите внимание, что новые изменения из поста Бориса: http://www.borismoore.com/2012/03/approaching-beta-whats-changing-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>
Другие вопросы по тегам