0

jsrender テンプレートを埋めるために使用されるループ内に「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 が定義されていません。」と表示されます。その後、動作します。

colcounter 変数を初期化する方法が機能していないようですが、正しい方法が見つかりません。var colcounter =0動作しません。

アップデート

  • jsfiddle: http://jsfiddle.net/ZX6Mk/
  • colcounter が動作するようになりました。グローバルスコープで宣言しました。しかし、datascape.showInvisible に問題があります。また、エラーが発生します Error: Cannot read property 'showInvisible' of undefined。

お時間をいただきありがとうございます。

4

1 に答える 1

3

私はあなたのフィドルを取り、いくつかの変更を加えました。http://jsfiddle.net/johnpapa/bLSkz/

  1. トグル ボタンは、# なしで jQuery で参照されていました。そうしないと、クリックがキャプチャされませんでした。
  2. あなたのフィドルはjQueryもJsRenderも参照していませんでしたが、両方を使用していたので、それらを追加しました。（フィドルを実行したことがないと思います）
  3. datascape.showInvisible プロパティがなかったので作成しました。

  4. パラメーターを使用して内側の for ループに showInvisible を渡したので、そのコンテキストでアクセスできるようになりました。

    {{for sections ~showIt=showInvisible}}

{{if (editorspick_amount > 0 || ~showIt)}}

  5. レンダリングしようとしていたテンプレートが存在しなかったため、作成したスクリプト タグを使用するようにレンダリング コードを変更しました。これにより、allowCode 機能を安全にオンにするために必要な allowCode=true も設定されます。

    $.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true });

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

  6. 許可コードを使用する必要がなかっ{{* }}たため、代わりにブロックを使用していた場所を 1 箇所変更しました。{{if}}

これにより、すべてのコードを実行し、テンプレートをレンダリングすることができましたが、あなたがやろうとしていたことのすべてに従ったわけではありません.

お役に立てれば。

1 つの提案... allowCode 機能は、非常に醜いテンプレートを作成し、保守と読み取りを困難にします。これをヘルパー関数 (または他の構造体) に置き換えることを強くお勧めします。たとえば、allowCode を使用して一部の要素のスタイルを作成しました。代わりにカスタム タグを使用して、ロジックを JavaScript に移動し、テンプレートを簡素化することもできます。colcounter はヘルパー関数に移動できます。ロジックを JavaScript に移動し、テンプレート/html をきれいに保つ方がはるかに読みやすくなります。ちょうど私の2セント:)

于 2012-04-08T15:36:55.770 に答える