ember.js - 如何突出显示选定的地址？

Question

如果用户单击 li 条目，则会触发 useThisAddress 操作，该操作会在 address 中设置 isSelected > 对象为true。从那里 bind-attr 负责设置适当的类(即“border-black”)。

这是解决这个问题的正确方法吗？或者有更好的方法吗？

下面的代码有效。但是，我对将 address 对象上的 isSelected 设置为 true 有点不确定，因为它不是 中的真实属性>地址对象模型。

// Controller
import Ember from 'ember';

export default Ember.Controller.extend({
  active: null,

  actions: {
    useThisAddress: function(address) {
      address.set('isSelected', true);
      var active = this.get('active');
      if (active) {
        active.set('isSelected', false);
      }
      this.set('active', address);
    }
  }
})

// Template
<ul>
  {{#each address in model}}
    <li {{bind-attr class='address.isSelected:border-black'}} {{action 'useThisAddress' address}}>
      Address: {{address.address1}} {{address.address2}}, {{address.city}}, {{address.postalCode}}
    </li>
  {{/each}}
</ul>

Answer 1

按照建议here您可以在 Controller 中存储一个包含所选项目的单独列表。