Javascript 在jsrender模板内定义变量

我需要在循环中保留一个“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>

{{:name}
切换
{{=colcounter}}
{{对于节}}
{{：标签}
{{for items}}
{{*if（colcounter>4）{
colcounter=1；
}} 
{{* } }}
{{* 
if（data.selected | | datascape.showInvisible）{}
{{:title}}
{{:time}

{{*colcounter++；}}
{{* } }}
{{/for}}
{{*colcounter=1；}}
{{/for}}
{{*colcounter=1；}}

不幸的是，它在循环的第一次迭代中打印“Error:colcounter未定义”。之后它就起作用了

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

更新

• jsfiddle：
• 计数器现在工作。我在全局范围内声明了它。但是我对datascape.showInvisible有一个问题。它还会触发错误

  错误：无法读取未定义的属性“showInvisible”

谢谢你抽出时间，

---

a、 我拿了你的小提琴，做了一些改动

在jQuery中引用了toggleButton，但没有#。所以我添加了.List项，否则点击就不会被捕获

您的fiddle没有引用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可以移动到helper函数。将逻辑移动到javascript，并保持模板/html的干净性，这样更具可读性。只有我的2美分：）

我拿了你的小提琴，做了一些改动

在jQuery中引用了toggleButton，但没有#。所以我添加了.List项，否则点击就不会被捕获

您的fiddle没有引用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可以移动到helper函数。将逻辑移动到javascript，并保持模板/html的干净性，这样更具可读性。就我的2美分：）

你能用你的例子在jsfiddle.net上创建一个提琴吗，包括你的javascript？您的HTML和模板提出了一些问题。首先，如果要显示该值，{{=colcounter}}可能应该是{{:colcounter}}。在jsrender中呈现值是使用如下{{:myVal}标记完成的。其次，如果colcounter是模板的数据上下文的一部分、在模板外部定义的javascript变量（除非您将其作为数据传入，否则将无法工作）或者您只想在模板内部定义的变量，这一点并不明显。我猜colcounter是您只想在模板中创建和使用的变量。在此之前，我强烈建议您将模板更改为不使用allowCode，而是使用一些帮助函数。if语句可以很容易地编写为使用helpers。但是，给我们展示一个JSFIDLE的完整示例，我可以为您提供更多帮助。您好，谢谢您的评论。这里是提琴：谢谢，我很快就会发布答案。你能用你的例子在jsfiddle.net上创建一个提琴吗，包括你的javascript？您的HTML和模板提出了一些问题。首先，如果要显示该值，{{=colcounter}}可能应该是{{:colcounter}}。在jsrender中呈现值是使用如下{{:myVal}标记完成的。第二