0

这可能很简单，我只是不在我打赌的正确轨道上。

我有一组从 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>
4

2 回答 2

1

一种选择是将包含数组的对象传递给您的模板。然后，在您可以使用 $index 的模板中执行“每个”，或者您可以显式跟踪索引和对象。

会像：

<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

我找到了一种方法，但它似乎有点hacky..

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

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