javascript - 在 jsrender 模板中定义变量

Question

我需要在循环内保留一个“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 不起作用。

更新

• jsfiddle:http://jsfiddle.net/ZX6Mk/
• colcounter 现在可以工作了。我在全局范围内声明了它。但我对 datascape.showInvisible 有疑问。也会触发错误错误:无法读取未定义的属性“showInvisible”。

感谢您的宝贵时间，a.

Answer 1

我拿走了你的 fiddle 并做了一些改变。 http://jsfiddle.net/johnpapa/bLSkz/

1. 在 jQuery 中引用的toggleButton 没有#。所以我添加了该列表项，否则不会捕获点击。
2. 你的 fiddle 没有引用 jQuery 或 JsRender，尽管你同时使用了这两者，所以我添加了它们。 (我假设你从来没有拉过 fiddle )
3. 没有 datascape.showInvisible 属性，因此我创建了一个。

4. 我使用参数将 showInvisible 传递给内部 for 循环，因此可以在其上下文中访问它。

   {{for sections ~showIt=showInvisible}}
   
   {{if (editorspick_amount > 0 || ~showIt)}}
   

5. 您尝试渲染的模板不存在，因此我更改了渲染代码以使用您创建的脚本标记。这还设置了allowCode=true，这是安全打开allowCode 功能所必需的。

   $.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true });
   
   $('#toggleButton').click(function(){
       if(!rendered){
           rendered = true;
           $("#datascape").html(
               $.render.myTmpl( datascape.json )
           ).show();
       }
   });
   

6. 我更改了使用 {{* }} 的地方，改为使用 {{if}} block ，因为不需要使用allow代码。

这允许运行所有代码并渲染模板，尽管我承认我没有遵循您尝试执行的所有操作。

希望这有帮助。

一个建议...allowCode 功能使得模板非常丑陋并且难以维护和阅读。我强烈建议用辅助函数(或其他结构)替换它。例如，您使用allowCode 为某些元素创建样式。您可以为此使用自定义标签，并将逻辑移至 JavaScript 并简化您的模板。可以将 colcounter 移至辅助函数。将逻辑转移到 javascript 会更具可读性，并保持模板/html 干净。只是我的 2 美分:)