Javascript 使用POJO初始化ArrayController的内容

目前，我的模板的数据是使用POJO以编程方式设置的，带有一些常量值：

var DROPDOWN_MENU = [
    { 'text' : 'Profile',  'icon' : 'fa fa-eye dd-icon',     'href' : '/profile' },
    { 'text' : null },
    { 'text' : 'Logout',   'icon' : 'fa fa-signout dd-icon', 'href' : '/signup/clear_session_and_logout' },
];

以下模板：

<a class="dropdown-toggle opener" {{bind-attr id="elId"}} data-toggle="dropdown">
    <i {{bind-attr class="myclass"}}></i>
</a>
<ul class="dropdown-menu" role="menu">
    {{#each entry}}
        {{#if entry.text}}
            <li role="presentation"><a role="menuitem" tabindex="-1" href="{{entry.href}}"><i class="{{entry.icon}}"></i>{{entry.text}}</a></li>
        {{else}}
            <li role="presentation" class="divider"></li>
        {{/if}}
    {{/each}}
</ul>

以及以下观点：

App.DropdownView = Ember.View.extend({
    templateName: 'navbar/dropdown',
    controller: App.DropdownController,
    didInsertElement: function() {
        var controller = this.get('controller');
        var elId = controller.get('elId');
        if (DEBUG) { console.log('DropdownView.didInsertElement > activating dropdown for elId=%s', elId); }
        $('#' + elId).dropdown();
    }
});

---

但是模板无法访问POJO定义的内容（因为它不是ObjectArray？）。如何使用POJO中的数据强制ArrayController中的内容？

如果您愿意使用任何Javascript中的组件：

var DROPDOWN_MENU = [
    { 'text' : 'Profile',  'icon' : 'fa fa-eye dd-icon',     'href' : '/profile' },
    { 'text' : null },
    { 'text' : 'Logout',   'icon' : 'fa fa-signout dd-icon', 'href' : '/signup/clear_session_and_logout' },
];

App.MyDropdownComponent = Ember.Component.extend({
    elId    : CNST.DROPDOWN_ELID,
    menu : DROPDOWN_MENU,
    myclass : 'fa fa-power-off fa-2x',
    didInsertElement: function() {
        var elId = this.get('elId');
        if (DEBUG) {
          console.log('DropdownView.didInsertElement > activating dropdown for elId=%s', elId); }
        $('#' + elId).dropdown();
    }
});

并在

app/components/my下拉列表中指定和附带模板。hbs

：

<a class="dropdown-toggle opener" {{bind-attr id="elId"}} data-toggle="dropdown">
    <i {{bind-attr class="myclass"}}></i>
</a>
<ul class="dropdown-menu" role="menu">
    {{#each entry in menu}}
        {{#if entry.text}}
            <li role="presentation"><a role="menuitem" tabindex="-1" href="{{entry.href}}"><i class="{{entry.icon}}"></i>{{entry.text}}</a></li>
        {{else}}
            <li role="presentation" class="divider"></li>
        {{/if}}
    {{/each}}
</ul>

{{else}

{{/if}
{{/每个}}

您可以进一步指定

类名，而不是在模板中手动绑定它们。看

此外，不必像上面那样对相同的POJO进行硬编码，而是可以传入任何您喜欢的值。请参阅。
是否有任何理由使用视图和控制器来完成此操作？组件看起来更自然。
<a class="dropdown-toggle opener" {{bind-attr id="elId"}} data-toggle="dropdown">
    <i {{bind-attr class="myclass"}}></i>
</a>
<ul class="dropdown-menu" role="menu">
    {{#each entry in menu}}
        {{#if entry.text}}
            <li role="presentation"><a role="menuitem" tabindex="-1" href="{{entry.href}}"><i class="{{entry.icon}}"></i>{{entry.text}}</a></li>
        {{else}}
            <li role="presentation" class="divider"></li>
        {{/if}}
    {{/each}}
</ul>