Question

美好的一天，为jsrender提供课程{{for}}的数组

[{
    "name": "Pete",
    "address": {
        "city": "Seattle"
    }
},
{
    "name": "Heidi",
    "address": {
        "city": "Sidney"
    }
},
{
    "name": "Semen",
    "address": {
        "city": "Sidney"
    }
}]

模板。

{{for address}}<b>{{>city}}</b>{{/for}}

渲染此模板会返回该数据

Seattle
Sidney
Sidney

在使用{{for}}时，我可以以某种方式避免重复相同的元素，也就是说，只显示：

Seattle
Sidney

Answer 1

我不熟悉jsrender。但是快速搜索让我进入了This Question & it's solution。

所以，对于这个特殊的问题，你可以通过重写它来满足你的要求，

{{for address}}
  {{if ~domTextExists(text)}}
       <b>{{>city}}</b>
  {{/if}}
{{/for}}

而且，对于助手来说，

$.views.helpers({

    domTextExists: function( text ) {

        return $("#yourParentDIV:contains('"+text+"')").length;

    }
});

查看JsRender Helper了解更多详情。

Answer 2

BTW而非写作

{{for address}}<b>{{>city}}</b>{{/for}}

您可以通过编写来简化

<b>{{>address.city}}</b>。

消除重复：

您可以在将数组传递给JsRender之前对其进行过滤。

如果你不想这样做，可以使用帮助器来排除重复项，但是帮助程序需要查看数组中的前一项，而不是DOM，因为JsRender中的呈现正在发生在插入DOM之前。

这是一个版本：

模板：

{{if !~alreadyInList(#index, address.city)}}
    <b>{{>address.city}}</b>
{{/if}}

使用Javascript：

var items = [...],

html = tmpl.render(items, {
    alreadyInList: function(index, city) {
        for (var i=0; i<index; i++) {
            if (items[i].address.city === city) {
                return true;
            }
        }
    }
});

$("#result").html(html);

我如何在jsrender中避免使用相同的元素？

2 个答案:

查看JsRender Helper了解更多详情。