Question

当用户点击模型时，请设置isActive:true并设置所有其他模型isActive:false。

我有两个组件和一个尝试实现此目的的路线。

从顶部开始，我有distro-item这是一个单一的模型项目

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

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

});

然后我有一个持有者组件，其中包含所有distro-item s

// 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);
    },
  }

});

我不确定这三个过程中的哪一个应该对过程的每个部分负责。最初的想法是发行人应该负责确定每个发行版应该处于哪个状态，并将其发送回路径。但无论我尝试什么，我都无法触发计算属性。这应该在路线上还是其他地方？

documentation example好像相当于发行人。当我改变isActive的状态时，它并没有像我期望的那样开火......

任何帮助表示赞赏！

Answer 1

而不是发行版中的计算属性，设置selectedDistro属性，并将其传递给每个发行版项目。然后，如果每个发布项的数据与selected数据相同，则每个发布项都可以识别并将true状态设置为selectedDistro，如果不是，则false（类似于个人无线电知道其无线电组值的方式。）

在发行版组件中，当单击发布项时，它会通过toggleActive操作将其数据发送到发行版：

actions: {
  toggleActive(distro) {
    this.sendAction('toggleActive', distro); // goes up to 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将在任何给定时间选择）：

selected: Ember.computed('selectedDistro', function() {
  return this.get('selectedDistro.name') === this.get('distro.name');
}),

为了演示将数据进一步输入控制器，发行版持有者发送控制器接收并执行的setName动作：

selectedDistro: null,

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

如果不知道，这种方法使用Data Down, Actions Up的Ember惯例。确保将数据（以及要使用的操作）传递到每个组件中，然后将操作重新发送（使用数据）可能很难理解并且一开始就正确。

我创建了一个Ember Twiddle example来演示。

Emberjs试图制作＆＃34;单选按钮＆＃34;类型功能

1 个答案: