Javascript Emberjs正在尝试创建；单选按钮；类型功能

当用户单击模型时，设置

isActive:true

，并设置所有其他模型

isActive:false

为了实现这一目标，我有两个部分和一条路线

从顶部开始，我有一个

发行版项目

，它是一个单一的模型项目

//components/distro-item
export default Component.extend({
  classNames: 'column is-2',
  tagName: 'div',
  isActive: false,

  actions: {
    toggleActive (distro) {
      this.sendAction('toggleActive', distro);
    }
  }

});

然后我有一个holder组件，它保存所有

发行版项

// components/distro-holder
export default Ember.Component.extend({
  sortedDistros: Ember.computed.sort('distros', 'sortDefinition'),
  sortDefinition: ['sortOrder:acs'],

  distros: computed('sortedDistros.@each.isActive', function () {
    console.log("triggered");
  }),

  actions: {
    toggleActive(distro) {
      this.sendAction('toggleActive', distro);
    }
  }

});

最后是路线

//route/new
export default Route.extend(AuthenticatedRouteMixin, {

  selectedDistro: undefined,

  model() {
    return RSVP.hash({
      distros: get(this, 'store').findAll('distro'),
    });
  },

  setupController(controller, models) {
    controller.setProperties(models);
  },

  actions: {
    toggleActive(distro) {
      this.set('selectedDistro', distro);
    },
  }

});

我不确定这三件事中的哪一件应该对流程的每一部分负责。最初的想法是发行版持有者应该负责确定每个发行版应该处于哪个状态，并将其发送回路由。然而，无论我尝试什么，我都无法获得要触发的computed属性。这是在路线上还是在其他地方

这个发行版看起来和发行版持有者一样。当我更改
isActive
的状态时，它不会像我预期的那样触发

感谢您的帮助
 设置一个
selectedDistro
属性，而不是distro holder中的计算属性，并将其传递给每个distro项目。然后，如果每个发行版项目的数据与所选的distro数据相同，则每个发行版项目都可以识别并将其状态设置为
selected
，如果数据与所选distro

数据相同，则将其设置为

true

，如果数据与所选distro数据不相同，则将其设置为

false

（类似于单个收音机识别其无线电组值的方式）

在distro item组件中，当单击distro item时，它会通过

TogleActive

操作将其数据发送给distro holder：

actions: {
  toggleActive(distro) {
    this.sendAction('toggleActive', distro); // goes up to distro-holder
  },
}, 

distro holder组件接收此数据并设置

selectedDistro

属性：

selectedDistro: null,

actions: {
  toggleActive(distro) {
    this.set('selectedDistro', distro);
    this.sendAction('setName', distro); // goes up to the controller
  }
}

distro item组件将其

selected

计算属性侦听

selectedDistro

，并将其自身的

selected

设置为true或false（这意味着在任何给定时间只会选择一个distro item）：

为了演示将数据进一步带入控制器，distro holder发送

setName

操作，控制器接收并执行该操作：

selectedDistro: null,

actions: {
  setName(distro) {
    this.set('selectedDistro', distro.name);
  }
}

如果不知道，此方法使用的是Ember公约。确保将数据（以及要使用的操作）向下传递到每个组件中，然后将操作（连同数据）发送回，这可能很难理解，而且一开始就很难正确

---

我已经创建了一个用于演示的。

您可以将此

selectedDistro

属性移动到控制器，并将

distros

数组传递到组件。

selectedDistro: null,

actions: {
  setName(distro) {
    this.set('selectedDistro', distro.name);
  }
}