javascript - Handlebars 选择框填充

Question

我的 HTML 代码，

我希望在每个用户名的选择框旁边选择每个用户 Angular 色，

在 Angular 色的每个循环内，我无法访问父用户 Node 的 Angular 色，是否可以将用户 Node 的 Angular 色id与 Angular 色 Node 的roleid进行比较，当相等时，该选项将被选中

<table>
<tr>
    <p>peter is employee</p>
  <p>john is admin</p>
  <p>michel is manager</p>
</tr>
{{#user}}
<tr>
    <td>
        <input type="text" value="{{name}}">
    </td>

    <td>
        <select>
            {{#each ../roles}}
            <option value="{{roleid}}">{{value}}</option>
            {{/each}}
        </select>
    </td>
</tr>
{{/user}}

这是可能的 Json

var data = {
"user": [
    { "name": "peter", "role": 1 },
    { "name": "john", "role": 2 },
    { "name": "michel", "role": 3 }
],
"roles": [
    { "roleid": 1, "value":"manager"},
    { "roleid": 2, "value":"employee"},
    { "roleid": 3, "value":"admin"}
]
};

fiddle 网址https://jsfiddle.net/Manu_S/egbwbfav/2/

谢谢

Answer 1

您可以访问父 Node 值并在选择框中进行比较。

请关注 Jsfiddle 的工作

https://jsfiddle.net/gsubbarao/nz0bc0pq/

<script id="t" type="text/x-handlebars">
<table>
<tr>
    <p>peter is employee</p>

  <p>john is admin</p>
  <p>michel is manager</p>
</tr>
<tr>
<td>&nbsp;</td><td></td><td></td>
</tr>
{{#user}}
<tr>
    <td>
        <input type="text" value="{{name}}">
    </td>

    <td>
        <select>
            {{#each ../roles}}
            <option value="{{roleid}}"
            {{#ifCond  ../role roleid}}
            selected
            {{/ifCond}}
            >
            {{value}}
            </option>

            {{/each}}
        </select>
    </td>
</tr>
{{/user}}

</script>

    var data = {
    "user": [
        { "name": "peter", "role": 2 },
        { "name": "john", "role": 3 },
        { "name": "michel", "role": 1 }
    ],
    "roles": [
        { "roleid": 1, "value":"manager"},
        { "roleid": 2, "value":"employee"},
        { "roleid": 3, "value":"admin"}
    ]
};
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});
var t = Handlebars.compile($('#t').html());
$('body').append(t(data));