Question

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

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

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

当前解决方案

我当前的解决方案可能无关紧要，但我会在此处发布以供上下文使用。

如前所述，我尝试了各种解决方案。我现在在我的应用程序中使用的那个按照描述工作，它是错误和杂乱的，这就是为什么我在寻找更好的解决方案：

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

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一个镜头。

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

1 个答案: