определить переменную внутри шаблона 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> 

К сожалению, он печатает, на самой первой итерации цикла «Error:. Colcounter не определен». Впоследствии он работает.

Кажется, что я инициализирую свою переменную colcounter, но не могу найти правильный путь. var colcounter =0 не работает.

UPDATE

• jsfiddle: http://jsfiddle.net/ZX6Mk/
• colcounter теперь работает. Я объявил это в глобальном масштабе. Но у меня проблема с datascape.showInvisible. Он также вызывает ошибку Error: Cannot read property 'showInvisible' of undefined.

Благодарим Вас за ваше время, a.

Answer 1

Я взял вашу скрипку и внес несколько изменений. http://jsfiddle.net/johnpapa/bLSkz/

1. ToggleButton упоминается в jQuery без #. Поэтому я добавил этот элемент .List, иначе клик не был захвачен.
2. Ваша скрипка не ссылалась на jQuery или JsRender, хотя вы использовали оба, поэтому я добавил их. (Я предполагаю, что вы никогда не запускали скрипку)
3. Не было свойства datascape.showInvisible, поэтому я создал его.

4. Я передал showInvisible для внутреннего цикла цикла, используя параметр, поэтому его можно было получить в его контексте.

   {{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}} блок, так как не было никакой необходимости использовать код позволяет.

Это позволило запустить весь код и шаблон для рендеринга, хотя я, по общему признанию, не соблюдал все то, что вы пытались сделать.

Надеюсь, это поможет.

Одно из предложений ... функция allowCode делает действительно уродливые шаблоны и их трудно поддерживать и читать. Я настоятельно рекомендую заменить его вспомогательными функциями (или другими конструкциями). Например, вы использовали allowCode для создания стиля для некоторых элементов. Вместо этого вы могли бы использовать специальный тег для этого, и переместили логику в javascript и упростили ваш шаблон. Колонка может быть перенесена на вспомогательную функцию. Это гораздо более читаемо, чтобы переместить логику в javascript и сохранить шаблон/html в чистоте.Просто мои 2 цента :)