Question

我试图为用户显示项目列表。在选择列表中，键的当前值为＆＃39;应该选择用户属性，但这不起作用。

这是我的代码片段：

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

有人能帮我解释为什么这不起作用吗？

Answer 1

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

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

jsviews如何选择列表元素

1 个答案: