jsviews how to make list element selected

Question

I'm trying to display list of projects for user. In the select list current value of 'key' user property should be selected, but this doesn't work.

Here is my code fragment:

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

Could anyone help me to understad why this is not working?

Answer 1

You data-link expression on <option> is incorrect. You need:

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

Notice that you need to step up through two parents. (Since with iteration using {{for}} there is a view for the array, which contains a child view for each item.)

An alternative is to pass in the outer key, like this:

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

Here is an updated version of your jsfiddle, using both approaches.

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

Change the drop-down, and the other corresponding drop-down updates too, through the two-way binding.