我如何避免 jsrender 中的相同元素？答案

【问题标题】：How i can avoid same elements in jsrender?我如何避免 jsrender 中的相同元素？
【发布时间】：2015-02-05 08:11:38
【问题描述】：

美好的一天，为 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

【问题讨论】：

你能回答下面的答案吗？你的问题得到回答了吗？谢谢...

标签： jquery jsrender

【解决方案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了解更多详情。

【讨论】：

【解决方案2】：

顺便说一句，而不是写

{{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);

【讨论】：