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

Question

我正在尝试链接来自 foos 和 selectedFoos 的数据。我希望列出 selectedFoos 并显示 foos 对象的名称。selectedFoos 中的 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>

JS

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

score 2 · Accepted Answer

您可以添加一个视图转换器以通过 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>

js

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

score 1 · Accepted Answer

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

所以有几种可能的方法。这是一个 jsfiddle： http: //jsfiddle.net/BorisMoore/7Jwrd/2/，它采用了 Scott 的小提琴的修改版本，采用稍微简化的转换器方法，但另外还显示了使用嵌套的 {{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

例如：

score 0 · Accepted Answer

您应该迭代selectedFoos并fooid通过迭代查找名称foos。然后在渲染之前组合该数据。

score 0 · Accepted Answer

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

此函数将name在给定id.

用法：

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

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

4 回答 4

Related

Reference