javascript jsrender if-else 使用 {{=propName}}
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8622045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsrender if-else using {{=propName}}
提问by Ian Davis
I'm trying out jsRender.
我正在尝试 jsRender。
What I want to do:
我想做的事:
JS template:
JS模板:
<script id="theaterTemplate" type="text/x-jquery-tmpl">
{{*
if ("{{=theaterId}}" == getCurrentTheaterId()) {
}}
<a class="active" href="#">
{{*
} else {
}}
<a href="#">
{{* } }}
{{=theaterName}}
</a>
</script>
In other JS:
在其他JS中:
function getCurrentTheaterId() {
return "523";
}
Basically, in the template, if the current theater id in iteration matches what's returned from the js function, then set the class to active. The "{{=theaterId}}" breaks in the if condition. I guess you're not allowed to access current json properties in the if condition.
基本上,在模板中,如果迭代中的当前剧院 id 与 js 函数返回的内容匹配,则将类设置为活动。"{{=theaterId}}" 在 if 条件中中断。我猜您不允许在 if 条件下访问当前的 json 属性。
Any ideas on how to do this?
关于如何做到这一点的任何想法?
Hopefully that makes sense. Thanks!
希望这是有道理的。谢谢!
回答by Steve Wellens
In their sample program they have this:
在他们的示例程序中,他们有这个:
$.views.allowCode = true;/
http://borismoore.github.com/jsrender/demos/step-by-step/11_allow-code.html
http://borismoore.github.com/jsrender/demos/step-by-step/11_allow-code.html
[Edit]
[编辑]
You have to 'tell' jsRender about the external function. Here's a working example:
您必须“告诉” jsRender 关于外部函数的信息。这是一个工作示例:
<script type="text/javascript">
function IsSpecialYear()
{
return '1998';
}
// tell jsRender about our function
$.views.registerHelpers({ HlpIsSpecialYear: IsSpecialYear });
</script>
<script id="movieTemplate" type= "text/html">
{{#if ReleaseYear == $ctx.HlpIsSpecialYear() }}
<div style="background-color:Blue;">
{{else}}
<div>
{{/if}}
{{=$itemNumber}}: <b>{{=Name}}</b> ({{=ReleaseYear}})
</div>
</script>
<div id="movieList"></div>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$.views.allowCode = true;
$("#movieList").html(
$("#movieTemplate").render(movies)
);
</script>
[EDIT 2] A more complicated boolean condition:
[编辑 2] 一个更复杂的布尔条件:
function IsSpecialYear(Year, Index)
{
if ((Year == '1998') && (Index == 1))
return true;
else
return false;
}
// tell jsRender about our function
$.views.registerHelpers({ HlpIsSpecialYear: IsSpecialYear });
</script>
<script id="movieTemplate" type= "text/html">
{{#if $ctx.HlpIsSpecialYear(ReleaseYear, $itemNumber) }}
<div style="background-color:Blue;">
{{else}}
<div>
{{/if}}
回答by BorisMoore
&& was not supported until a recent beta candidate became available. The amount of logic you could do declaratively in the template was limited, and did not include && or ||. However the support for comparison operators is now very complete. There are some examples here: http://borismoore.github.com/jsrender/demos/step-by-step/10_comparison-tests.html
&& 在最近的 beta 候选版本可用之前不支持。您可以在模板中以声明方式执行的逻辑数量是有限的,并且不包括 && 或 ||。然而,对比较运算符的支持现在非常完整。这里有一些例子:http: //borismoore.github.com/jsrender/demos/step-by-step/10_comparison-tests.html