[英]define a variable inside a jsrender template
我需要在循环中保留一个“colcounter”变量,用于填充 jsrender 模板。
这是我的模板代码
<script id="datascapeTemplate" type="text/x-jsrender">
<div id="dsViewport">
<div class="ds-column" style="width:{{:(name.length*100)}}px;">
<h1 id="datascapeName">{{:name}}</h1>
<div><span id="dsToggle">toggle</span></div>
</div>
{{=colcounter}}
{{for sections}}
<div class="ds-section">
<h3>{{:label}}</h3>
<div class="ds-column" id="start">
{{for items}}
{{* if (colcounter > 4){
colcounter = 1;
}}
</div>
<div class="ds-column" id="start">
{{* } }}
{{*
if ( data.selected || datascape.showInvisible) { }}
<div class="ds-item {{* if (data.featured){ }} nowActive {{*} }} {{* if (data.active){ }} nowActiveRed {{*} }}" background="{{:background}}" bgcolor="#000000" fgcolor="#FFFFFF">
<div class="ds-item-container">
<h4>{{:title}}<br/>{{:time}}</h4>
<p><a item="{{:id}}" href="{{:url}}" class="itemLink">view file {{:colcounter}}</a></p>
</div>
</div>
{{* colcounter++; }}
{{* } }}
{{/for}}
</div>
{{* colcounter=1; }}
</div>
{{/for}}
{{* colcounter=1; }}
</div>
</script>
不幸的是,它在循环的第一次迭代中打印“错误:未定义 colcounter”。 之后它起作用了。
似乎我初始化 colcounter 变量的方式不起作用,但我找不到正确的方式。 var colcounter =0
不起作用。
更新
Error: Cannot read property 'showInvisible' of undefined
。谢谢你的时间,一个。
我拿走了你的小提琴并做了一些改动。 http://jsfiddle.net/johnpapa/bLSkz/
我使用参数将 showInvisible 传递给内部 for 循环,因此可以在其上下文中访问它。
{{for sections ~showIt=showInvisible}} {{if (editorspick_amount > 0 || ~showIt)}}
您尝试呈现的模板不存在,因此我更改了呈现代码以使用您创建的脚本标签。 这也设置了 allowCode=true,这是安全打开 allowCode 功能所必需的。
$.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true }); $('#toggleButton').click(function(){ if(;rendered){ rendered = true. $("#datascape").html( $.render.myTmpl( datascape.json ) );show(); } });
我更改了一个您使用{{* }}
的地方,改为使用{{if}}
块,因为不需要使用允许代码。
这允许所有代码运行并呈现模板,尽管我承认我没有遵循你试图做的所有事情。
希望这可以帮助。
一个建议...... allowCode 特性使得模板非常丑陋并且难以维护和阅读。 我强烈建议用辅助函数(或其他构造)替换它。 例如,您使用 allowCode 为某些元素创建样式。 您可以为此使用自定义标记,并将逻辑移至 javascript 并简化您的模板。 可以将 colcounter 移动到助手 function。将逻辑移动到 javascript 并保持模板/html 清洁更具可读性。 只是我的 2 美分:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.