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>

不幸的是，它在循环的第一次迭代中打印出来“Error：colcounter未定义。”。之后就行了。

似乎我初始化我的colcounter变量的方式不起作用，但我找不到正确的方法。 var colcounter =0不起作用。

更新

jsfiddle：http://jsfiddle.net/ZX6Mk/
colcounter现在工作。我在全球范围内宣布它。但是我遇到了datascape.showInvisible的问题。它还会触发错误 Error: Cannot read property 'showInvisible' of undefined。

感谢您的时间，一个。

Answer 1

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

在没有＃的情况下，jQuery中引用了toggleButton。所以我添加了.List项，否则没有捕获到的点击。
你的小提琴没有引用jQuery和JsRender，虽然你使用了两者，所以我添加了它们。（我假设你从未跑过小提琴）
没有datascape.showInvisible属性，所以我创建了一个。
我使用参数将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可以移动到辅助函数。将逻辑移动到javascript，并保持模板/ html干净，这样更具可读性。只是我2美分:)）

在jsrender模板中定义一个变量

1 个答案: