Question

这可能很简单我只是没想到正确的轨道。

我有一个从我的WCF调用返回的JSON对象数组，由JQuery AJAX调用读取。

让我们说对象看起来像这样：

string Name
string BackgroundImage

所以我想要在我的网页上放置一些跨度，我想给他们唯一的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>

Answer 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即可设置。

Answer 2

我找到了一种方法，但它看起来有点像hacky ..

在我的.appendTo（）之前我可以在.js中添加一个道具，这样在WCF中就不需要一个..

    var x = 1;
    $.each(json.d, function (i, item) {
        item.ID = x++; 
    });

JQuery模板需要分配ID

2 个答案: