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

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

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

Html，模板

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

---

您应该迭代

selectedFoos

并通过迭代

foos

使用

fooid

查找名称。然后在呈现之前合并这些数据。

您可以添加一个按id查找名称的方法

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

像这样-

---

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

因此，有几种可能的方法。下面是一个JSFIDLE：它采用了Scott的FIDLE的一个修改版本，采用了一种稍微简化的转换器方法，但另外还显示了使用嵌套的{{for}}循环，以及使用辅助函数的两个不同示例

您可以修改

名称

或

代码

，并查看更新的工作方式。您将看到，

code

在所有情况下都会更新，但是要更新

名称

就需要进行查找

您将看到，在以下两种方法中，甚至与名称的数据绑定也可以工作

为循环嵌套

模板：

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

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

模板：

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

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

{^{for sf}
{^{:~getFoo（fooid.name}}-{^{:code}}
{{/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}}