Ember 在操作中修改对象的属性答案

【问题标题】：Ember modify object's property in actionEmber 在操作中修改对象的属性
【发布时间】：2016-07-30 18:19:25
【问题描述】：

问题是我想要两级菜单。单击后将显示每个菜单元素的第二级。如果再次单击它应该隐藏子菜单。所以我想我可以通过在一级菜单元素上切换 CSS 类来做到这一点。

Component.js - 到目前为止，我想要 2 个主菜单元素。

menus: [{
            'name': 'Dashboard',
            'icon': 'dashboard',
            'active': false,
            submenus: [{
                ...
            }]
        },
        {
            'name': 'Settings',
            'icon': 'cloud',
            'active': false,
            submenus: [{
                 ...
            }], 
        }
    ],

在模板中我动态生成 HTML 元素。我已经将活动属性与类绑定，所以如果它在 component.js 中发生变化，它应该会影响 CSS 类。

{{#each menus as |menu|}}
    <li class="collapsible" {{bind-attr class="menu.active:active"}} {{action 'toggle' menu}}>
        <a ><span class="glyphicon glyphicon-{{menu.icon}}"></span>{{menu.name}}</a>
        <ul>
           {{#each menu.submenus as |submenu|}}
               {{#link-to submenu.route activeClass="selected" tagName="li"}}
                   <a href=""><{{submenu.name}}</a>
               {{/link-to}}
           {{/each}}
       </ul>
    </li>
{{/each}}

所以最后我定义了一个简单的动作来切换一级菜单的活动参数。

actions: {
    toggle: function(menu) {
        this.toggleProperty(menu.active);
    }
}

但它说我没有将元素指定为字符串。如果我把它改成menu.toggleProperty('active')，它会说toggleProperty 不是一个函数。

你能给我建议吗？谢谢

【问题讨论】：

您使用的是什么版本的 Ember.js？ bind-attr 是 2.0 之前的版本。
听起来menu 不是Ember.Object，所以它上面没有toggleProperty 方法可用。
Ember 版本为 2.3.0。当我记录菜单时，它会正确打印对象，但是当我尝试运行 toggleProperty - 它说它不是一个函数。 P.S - 感谢编辑
奇怪的是bind-attr 没有给你一个错误，它在 2.0.0 中被删除了。

标签： ember.js

【解决方案1】：

我相信您会收到该错误，因为 menu 不是 Ember.Object。您可以手动完成：

actions: {
  toggle(menu) {
    Ember.set(menu, 'active', !Ember.get(menu, 'active'));
  }
}

【讨论】：

非常感谢！这不是 Ember.Object 是否正常？并感谢您指出 bind-attr 已被弃用:)
是的，我相信是的。如果您没有关闭本机扩展，Ember.js 应该自动将数组包装在 Ember.Array 中，而不是对象。