在jsrender中链接来自不同json对象的数据答案

【问题标题】：linking data from different json objects in jsrender在jsrender中链接来自不同json对象的数据
【发布时间】：2014-04-11 03:45:25
【问题描述】：

我正在尝试链接来自 foos 和 selectedFoos 的数据。我希望列出 selectedFoos 并显示 foos 对象的名称。 selectedFoos 中的 fooid 将链接到 foos id。

编辑：我不想改变 foos 或 selectedFoos 的结构。

fiddle is here

HTML，模板

<div id="content"></div>
<script id="content_gen" type="x-jsrender">
    <ul> {^{for sf}} 
         <li > {{: fooid}} - {{: code}} {{foo.name}} </li>   
         {{/for}} 
    </ul>
</script>

var foos = [{
    "id": 1,
        "name": "a"
}, {
    "id": 2,
        "name": "b"
}, {
    "id": 3,
        "name": "c"
}];
var selectedFoos = [{
    "fooid": 1,
        "code": "z"
}, {
    "fooid": 3,
        "code": "w"
}];

var app = {
    sf: selectedFoos,
    f: foos
};
var templ = $.templates("#content_gen");
templ.link("#content", app);

【问题讨论】：

标签： javascript json relation jsrender jsviews

【解决方案1】：

您可以添加 view converter 以通过 id 查找名称。

像这样 - http://jsfiddle.net/Fz4Kd/11/

<div id="content"></div>
<script id="content_gen" type="x-jsrender">
    <ul> {^{for sf}}
        <li>{{id2name:fooid ~root.f }} - {{: code}} </li>   
    {{/for}} 
        </ul>
</script>

var app = {
    sf: selectedFoos,
    f: foos
};

$.views.converters("id2name", function (id, foos) {
    var r = $.grep(foos, function (o) {
        return o.id == id;
    })
    return (r.length > 0) ? r[0].name : '';
});

var templ = $.templates("#content_gen");
templ.link("#content", app);

【讨论】：

【解决方案2】：

斯科特的回答很好。但是由于您使用的是 JsViews - 您可能希望进行数据链接，以便绑定到名称和代码值。这里有一个有趣的案例，您想在实际上遍历查找时进行绑定...

所以有几种可能的方法。这是一个 jsfiddle：http://jsfiddle.net/BorisMoore/7Jwrd/2/，它采用了 Scott 的 fiddle 的修改版本，具有稍微简化的转换器方法，但另外显示了使用嵌套的 {{for}} 循环，以及使用辅助函数的两个不同示例。

您可以修改name 或code，看看更新是如何工作的。您会看到code 在所有情况下都会更新，但要让name 更新，考虑到查找，会更加棘手。

您会看到，在以下两种方法中，即使是名称的数据绑定也有效。

嵌套 for 循环

模板：

{^{for sf }}
    {^{for ~root.f ~fooid=fooid ~sf=#data}}
        {{if id === ~fooid}}
            <li>{^{:name}} - {^{:~sf.code}} </li>
        {{/if}}
    {{/for}}
{{/for}}

帮助程序返回查找对象

助手：

function getFoo(fooid) {
    var r = $.grep(foos, function (o) {
        return o.id == fooid;
    })
    return r[0] || {name: ""};
}

模板：

{^{for sf}}
    <li>{^{:~getFoo(fooid).name}} - {^{:code}} </li>
{{/for}}

在此处查看许多主题和示例

http://www.jsviews.com

例如：

【讨论】：

谢谢鲍里斯。这里有一场解决方案的盛宴。

【解决方案3】：

您应该遍历selectedFoos 并通过遍历foos 来查找带有fooid 的名称。然后在渲染之前组合这些数据。

【讨论】：

【解决方案4】：

function getNameById(id) {
    for (var i = 0; i < foos.length; i++)
        if (foos[i].id == id)
            return foos[i].name;
    return '';
}

当给定id时，此函数将返回name。

用法：

alert(getNameById(2)); // alerts "b"

【讨论】：