Как использовать переменные 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
Код ниже имеет эти заметные изменения:
- Новый синтаксис должен использовать {{:yourProperty}} для визуализации значения свойства.
- {{#each}} был заменен на {{for}}
- на вспомогательные функции теперь ссылается тильда ~ вместо ctx
- Находясь внутри цикла for, вы можете получить доступ к родительскому контексту, используя #view.parent или просто #parent (потому что подразумевается представление). Таким образом, внутри цикла массива вы должны 1 родитель получить вас в массив, другой родитель приведет вас к родителю массива, и данные получат вас данные. Это немного многословно, но позволяет вам иметь доступ к контексту. {{# Parent.parent.data.Title}}
- [ОБНОВЛЕНО] Вы можете либо передать данные, которые хотите использовать, либо получить доступ к 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>