jsrenderテンプレート内で変数を定義する

Question

jsrenderテンプレートを埋めるために使用するループ内に "colcounter"変数を保持する必要があります。 「：colcounterが定義されていません。エラー」ここ

は私のテンプレートコードは、残念ながら、それはループの最初の反復で、印刷し

<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変数が動作していない初期化のようだが、私は正しい方法を見つけることができません。 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で参照されていました。だから私はそれを追加しました。リストアイテム、そうでなければ、クリックはキャプチャされていませんでした。
2. あなたのフィドルはjQueryもJsRenderも参照していませんでしたが、両方を使用していたので追加しました。 （私はあなたがフィドルを決して走らなかったと仮定します）
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}}ブロックを使用するように{{* }}を使用し一つの場所を変更しました。

私は確かにあなたがやろうとしていたもののすべてに従っていませんでしたが、これは、すべてのコードが実行され、レンダリングするテンプレートを許可。

これが役に立ちます。

1つの提案... allowCode機能は、実際には醜いテンプレートを作成し、維持管理や読み込みが難しくなります。ヘルパー関数（または他の構造体）で置換することを強くお勧めします。たとえば、allowCodeを使用していくつかの要素のスタイリングを作成しました。この代わりにカスタムタグを使用し、ロジックをjavascriptに移動してテンプレートを簡略化することができました。 colcounterをヘルパー関数に移動することができます。ロジックをjavascriptに移し、template/htmlをきれいに保つだけでははるかに読みやすくなります。ちょうど私の2セント:)