javascript - 从单选按钮选择分配值的最佳方法

Question

我创建了这个小 jsbin，其中包含适合我的用例的框架:http://emberjs.jsbin.com/kufijixicu/1/edit?html,js,output

我尝试以各种方式实现的是能够分配 color基于单选按钮列表中的选择的值。我相信有一个简单的解决方案。

该解决方案还必须提供一种已在列表中选择潜在现有值的方法。所以如果 color已选择，应在列表中选中所选的一项。

<小时/>

当前解决方案

我当前的解决方案可能无关紧要，但我会将其发布到此处以供引用。

如上所述，我尝试了各种解决方案。目前我的应用程序中的应用程序按描述工作，它有错误且困惑，这就是为什么我正在寻找更好的解决方案:

ColorController有一个操作，该操作附加到 <li>在上面的 jsbin 中:

selectColor: function(color) {
  this.send('setColor', color);
  this.forEach(function(item) {
    item.set('isChecked', item.get('model') == color);
  });
}

IndexController有setColor行动:

setColor: function(color) {
  this.set('color', color);
}

初始选择是通过ColorController上的观察者设置的:

colorsChanged: function() {
  if (this.filterBy('isChecked', true).get('length') == 0) {
    var selectedColorId = this.parentController.get('model.color_id')+'',
        selectedColor = this.filterBy('id', selectedColorId);

    if (selectedColor.get('length') == 0) return;
    selectedColor.objectAt(0).set('isChecked', true);
  }
}.observes('this.[]')

这看起来太困惑了，但它也不能 100% 工作。例如，单击单选按钮本身实际上会再次取消选中该单选按钮。

Answer 1

在 Ember 中，单选按钮和复选框之类的东西最好封装在组件中。不幸的是，一些边缘情况阻止了 Ember 将单选按钮组件作为核心的一部分提供。

我要做的第一件事是看看其他人是否已经实现了这个。您在使用 Ember CLI ？如果不是，你应该是。浏览 Ember Addons我找到two radio button components .

我会给ember-radio-button一枪。