javascript - 如何将动态单选按钮绑定(bind)到 Ember 中的 Controller 属性

Question

我一直在与单选按钮作斗争。我只想动态创建一些单选按钮，然后将选中的单选按钮绑定(bind)到 Controller 上的属性。

我试过这个问题的答案:https://stackoverflow.com/a/18991426/62653

但是，当您动态创建单选按钮时它不起作用。

这是已接受答案的片段:

 <label>
    {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value="true"}}
    true
 </label>
 <label>
     {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value="false"}}
    false
 </label>

但是当您像这样动态创建单选按钮 View 时，它不起作用:

{{#each myModel.someCollection}}
    <label>
        {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value=id}}
        {{id}}
    </label>
{{/each}}

如果您像上面那样使用循环创建单选按钮，则属性 isSelected 不会更新。

绑定(bind)单选按钮有什么想法或其他解决方案吗？

Answer 1

#each block 内的范围正在更改为 myModel.someCollection 中的每个对象。因此，您绑定(bind)了 myModel.someCollection.collection.isSelected 值。您想要使用不更改上下文的 #each block 的替代形式，允许您绑定(bind)到 isSelected。您还需要显式绑定(bind)值，您用作模板的代码不必这样做，因为该值是硬编码的。试试这个:

{{#each item in myModel.someCollection}}
    <label>
        {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" valueBinding=item.id}}
        {{item.id}}
    </label>
{{/each}}

Here is a working JSFiddle

Here are the docs

出于好奇，这里是他使用的自定义 radioButton 的原始示例代码:http://jsfiddle.net/chopper/CM6fK/35/

值得注意的是，要使这些绑定(bind)正常工作，数组中的对象需要是 Ember 对象，并且只需要使用 Ember 方法添加、删除和修改它们(get和 set)，这将确保所有绑定(bind)得到正确更新。