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

Question

如果用户点击li条目，它会触发 useThisAddress操作，设置 isSelected在 address反对true .从那里 bind-attr负责设置适当的类(即“border-black”)。

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

下面的代码有效。但是，我对设置 isSelected 有点不确定。至true在 address对象，因为它不是 address 中的不动产对象模型。

// 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 中存储一个包含选定项目的单独列表。