0

ユーザーのプロジェクトのリストを表示しようとしています。選択リストで「キー」ユーザー プロパティの現在の値を選択する必要がありますが、これは機能しません。

ここに私のコードフラグメントがあります: 

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

2 つの親を介してステップアップする必要があることに注意してください。(繰り返し使用{{for}}するため、各項目の子ビューを含む配列のビューがあります。)

key別の方法は、次のように outer を渡すことです。

{^{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 に答える