如何将动态单选按钮绑定到Ember中的控制器属性

时间:2014-09-29 19:04:02

标签: javascript ember.js ember-1

我一直在努力使用单选按钮。我只是想动态创建一些单选按钮,然后将选中的单选按钮绑定到控制器上的属性。

我在这个问题中尝试了答案: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>

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

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

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

绑定单选按钮的任何想法或其他解决方案?

1 个答案:

答案 0 :(得分:5)

范围正在#each块内更改为myModel.someCollection中的每个对象。因此,您绑定myModel.someCollection.collection.isSelected值。您希望使用#each块的替代形式,它不会更改上下文,允许您绑定到isSelected。您还需要显式绑定值,您用作模板的代码不必这样做,因为该值是硬编码的。请尝试:

{{#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/

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