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

Answer 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>

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

Answer 2

斯科特的回答很好。但是，由于您使用的是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

如下：

Answer 3

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

Answer 4

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"

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

4 个答案: