Как сделать элемент списка выбранным

Question

Я пытаюсь отобразить список проектов для пользователя. В списке выбора должно быть выбрано текущее значение пользовательского свойства '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/

Может ли кто-нибудь помочь мне понять, почему это не работает?

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/

Измените раскрывающийся список, а также другие соответствующие раскрывающиеся обновления также с помощью двусторонней привязки.