0

これはおそらく非常に単純です。私は正しい軌道に乗っていないに違いありません。

JQuery AJAX 呼び出しによって読み取られた、WCF 呼び出しから返される JSON オブジェクトの配列があります。

オブジェクトが次のようになっているとします。

string Name
string BackgroundImage

そのため、Web ページに配置したいスパンがたくさんあり、それらに一意の ID を付与したいと考えています。IDをjsonオブジェクトに投げることで、この「悪い」方法でそれを行うことができました

    $("#tabLink").tmpl(json.d).appendTo("#nav");

--

    <script id="tabLink" type="text/x-jQuery-tmpl">
        <span id="page{$id}" class="tabLinks" style="background-image:url(${BackgroundImage}")>Tab {$id}</span>
    </script>

見たい：

<span id="page1" class="tabLinks" style="blahblahblah")>Tab {$id}</span>
<span id="page2" class="tabLinks" style="blahblahblah")>Tab {$id}</span>
<span id="page3" class="tabLinks" style="blahblahblah")>Tab {$id}</span>
4

2 に答える 2

1

1 つのオプションは、配列を含むオブジェクトをテンプレートに渡すことです。次に、 $index を使用できるテンプレートで「each」を実行するか、インデックスとオブジェクトを明示的に追跡できます。

次のようになります。

<script id="tabLink" type="text/x-jQuery-tmpl">
      {{each items}}
        <span id="page${$index}" class="tabLinks" style="background-image:url(${BackgroundImage}")>Tab ${$index}</span>
      {{/each}}
 </script>

また：

<script id="tabLink" type="text/x-jQuery-tmpl">
      {{each(i, item) items}}
        <span id="page${i}" class="tabLinks" style="background-image:url(${BackgroundImage}")>Tab ${i}</span>
      {{/each}}
</script>

そして次のように呼び出されます：

$("#tabLink").tmpl({ items: json.d }).appendTo("#nav");

サンプルはこちら: http://jsfiddle.net/rniemeyer/JHACF/

配列を .tmpl に渡すだけでは $index を使用できないようです。それ以外の場合は、$index を使用するだけで設定されます。

于 2011-02-25T16:27:50.960 に答える
0

1つの方法を見つけましたが、少しハッキーなようです..

.appendTo() の前に、.js にプロップを追加して、WCF でプロップが不要になるようにすることができます。

    var x = 1;
    $.each(json.d, function (i, item) {
        item.ID = x++; 
    });
于 2011-02-24T21:10:33.530 に答える