0

我正在尝试为用户显示项目列表。在选择列表中，应该选择“key”用户属性的当前值，但这不起作用。

这是我的代码片段： 

<script id="usersTmpl" type="text/x-jsrender">
{^{for users}}
    {^{for permissions}}
        <select data-link="key">
            {^{for ~projects(app)}}
            <option data-link="{:key} selected{:key === {{>#parent.data.key}}}"></option>
            {{/for}}    
        </select>
    {{/for}}
{{/for}}    
</script>
function getProjects(application) {
    var keys = [];
    permissions.projects.forEach( function (project)
        {
            if(project.application == application) {
                keys.push(project);
            }
        });
  return keys;
}

var usersTemplate = $.templates("#usersTmpl");

var users = [
    {
        username: "first",
        displayName: "First User",
        email: "mymail@localhost",
        permissions: [
            {
                app: "APP1",
                key: "PRJ2",
                name: "admin"
            },
            {
                app: "APP1",
                key: "PRJ",
                name: "view"
            },
            {
                app: "APP2",
                key: "CFL2",
                name: "view"
            }
        ]
    }
]
var projects = [{application: "APP1", name: "Project", key: "PRJ", lead: "leaduser"}, {application: "APP1", name: "Project2", key: "PRJ2", lead: "leaduser2"},
        {application: "APP2", name: "Name1", key: "CFL1", lead: "leaduser"}, {application: "APP2", name: "Name2", key: "CFL2", lead: "leaduser"}]

var permissions = {
    applications: ["APP1", "APP2", "APP3"],
    projects: projects,
    users: users,


}

$.views.helpers({projects: getProjects});
usersTemplate.link("#usersList", permissions);

http://jsfiddle.net/er2f1rw3/1/

谁能帮我理解为什么这不起作用？

4

1 回答 1

0

您的数据链接表达式<option>不正确。你需要：

<option data-link="{:key} selected{:key === #parent.parent.data.key}"></option>

请注意，您需要通过两个父母来加强。（由于使用迭代{{for}}，数组有一个视图，其中包含每个项目的子视图。）

另一种方法是传入外部key，如下所示：

{^{for ~projects(app) ~outerkey=key}}
    <option data-link="{:key} selected{:key === ~outerkey}"></option>
{{/for}}

这是使用这两种方法的 jsfiddle 的更新版本。

http://jsfiddle.net/er2f1rw3/2/

通过双向绑定更改下拉列表，其他相应的下拉列表也更新。

于 2015-08-12T21:57:26.417 回答