Javascript RadioButtonList位于Ember中，将模型特性绑定到选定值

我已经阅读并尝试了一些代码，但没有任何东西像我希望的那样工作。。。这是我现在掌握的密码

index.html：

<div class="form-group">
    <label for="accommodation">3.2. ACCOMMODATION (*)</label> <br />
    <div>
        {{view Ember.RadioButton name="accommodation" valueBinding='accommodation' selectionBinding="isSelected" value="Not Required"}}
        Not Required 
    </div> <br />
    <div>
        {{view Ember.RadioButton name="accommodation" valueBinding='accommodation' selectionBinding="isSelected" value="Required"}}
        Required 
    </div> 
</div>

我希望从这些RadioButtonList中能够检索所选项目的值，以便将其作为POST发送到api，并使用所选值隐藏/显示依赖于所选值的div。有什么办法吗

编辑：

我正在尝试andrusieczko的代码，到目前为止，我有：

radio.js：

App.RadioView = Ember.View.extend({
    tagName: 'input',
    type: 'radio',
    attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name'],

    htmlChecked: function () {
        return this.get('value') === this.get('checked');
    }.property('value', 'checked'),

    change: function () {
        this.set('checked', this.get('value'));
    },

    _updateElementValue: function () {
        Ember.run.next(this, function () {
            this.$().prop('checked', this.get('htmlChecked'));
        });
    }.observes('htmlChecked')
});

Ember.Handlebars.helper('radio-button', App.RadioView);

控制器：

App.EventsNewController = Ember.ObjectController.extend({

    acRequired: 'Required',
    acNotRequired: 'Not Required',

    accommodation: null,

App.IndexController = Ember.Controller.extend({
  country1: 'USA',
  country2: 'Singapore',
  country3: 'Poland',

  country: null,
});

Index.html：

<div class="form-group">
     <label for="accommodation">3.2. ACCOMMODATION (*)</label> <br />
     <div>
         {{radio-button value=acRequired checked=accommodation}}
         Not Required 
     </div>
     <div>
         {{radio-button value=acNotRequired checked=accommodation}}
         Required 
     </div> 
</div>

Index.html：

    <!-- Accommodation - RadioButtonList -->
<div class="form-group">
     <label for="accommodation">3.2. ACCOMMODATION (*)</label> <br />
     <div>
          {{view Ember.Radio name="accommodation" selectionBinding='accommodation' value="acNotRequired"}}
          Not Required
     </div>
     <div>
          {{view Ember.Radio name="accommodation" selectionBinding='accommodation' value="acRequired"}}
          Required
     </div>
</div>

---

备注：我使用的是Ember版本1.6.1

如果您没有使用Ember应用程序工具包或Ember cli，那么您所要做的就是：

App.RadioView = Ember.View.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name'],

  htmlChecked: function() {
    return this.get('value') === this.get('checked');
  }.property('value', 'checked'),

  change: function() {
    this.set('checked', this.get('value'));
  },

  _updateElementValue: function() {
    Ember.run.next(this, function() {
      this.$().prop('checked', this.get('htmlChecked'));
    });
  }.observes('htmlChecked')
});

Ember.Handlebars.helper('radio-button', App.RadioView);

然后，在控制器中：

App.EventsNewController = Ember.ObjectController.extend({

    acRequired: 'Required',
    acNotRequired: 'Not Required',

    accommodation: null,

App.IndexController = Ember.Controller.extend({
  country1: 'USA',
  country2: 'Singapore',
  country3: 'Poland',

  country: null,
});

在模板中：

{{radio-button value=country1 checked=country}}
{{radio-button value=country2 checked=country}}
{{radio-button value=country3 checked=country}}

您可以监听传递给助手的属性，并根据这些属性触发其他操作

而且它可以很容易地与

{{each}

：）一起使用

有帮助吗

工作示例（余烬1.6.1，余烬数据1.0.0-beta.9）：

---

免责声明：我不是代码的作者，我是不久前从某处获取的。

如果您可以处理不使用HTML

元素的问题，请尝试使用我编写的此组件

注意，我使用的是Ember 1.10和Ember CLI

my template.js

（控制器）

my template.hbs

{{#mutex-button-set key="value" default=options.firstObject stateChanged="optionChanged" buttons=options as |button|}}
    <div>{{button.name}}</div>
{{/mutex-button-set}}   

mutex按钮集.js

import Ember from 'ember';
export default Ember.Component.extend({
    classNames: ['mutex-button-set'],

    actions: {
        setSelected: function(obj) {
            var key = this.get("key");

            this.get("buttons").forEach(function(button) {
                Ember.set(button, "selected", obj && (button.get(key) === obj.get(key)));
            });

            if (obj) {
                this.sendAction('stateChanged', obj);   
            }
        }
    },

    didInsertElement: function() {
        this.send("setSelected", this.get("default"));
    }

});

生成的HTML

<div id="ember554" class="ember-view mutex-button-set">
    <div data-ember-action="559" class="mutex-button selected">
        <div>Required</div>
    </div>  
    <div data-ember-action="563" class="mutex-button ">
        <div>Not Required</div>
    </div>  
</div>

要求的
不需要

啊，对了，你没有使用ember客户端的EAK。。。我的错。。。我现在的时间有限，但不是使用

导出默认值

，而是使用余烬的约定：

App.RadioView=

，对于助手可能也是如此。如果您有时间可以编辑您的答案，那么助手中的行将是

Ember.handlebar.makeViewHelper（App.RadioView）

。对不起，谢谢。我使用的是Ember 1.6.1，而不是6个版本之前的Ember Clip。现在就开始迁移，以便为Ember 2.0做好准备。：）我必须在这个版本中完成这个项目，但下一个版本我肯定会使用更新的版本：）我对代码做了一些更改，但仍然有一些问题我有疑问，我是否应该再做一次编辑（问题会很长！），只需删除问题的内容并替换它（可能会让未来的访问者感到困惑）或者就同一主题再问一个问题？嘿，你第一次编辑看起来不错；如何在控制器中发送POST请求？您是否在其中使用了

住宿

属性？我最后添加了一个帖子的控制器，但这不起作用。。。当我在表单中执行类似{{acomodiaton}}的操作时，它会正确读取值并随着我的更改而更改，但当提交表单时，POST请求的acomodiaton始终为null。首先，您的

模型在哪里？它是否在您的
路线中创建/找到？此外，
住宿
不绑定到您的模型。您可能想做的是在您的hbs文件中设置`{radio button value=acRequired checked=model.accountability}}`。然后，
住宿
属性将在
模型中更改。当然，假设
this.get（'model'）
是一个现有的模型。我让它工作了！！！谢谢你，真的非常感谢！我为此挣扎了一段时间，你救了我；）！
{{#each button in buttons}}
    <div {{bind-attr class=":mutex-button button.selected:selected"}} {{action "setSelected" button}}>
        {{yield button}}
    </div>  
{{/each}}

import Ember from 'ember';
export default Ember.Component.extend({
    classNames: ['mutex-button-set'],

    actions: {
        setSelected: function(obj) {
            var key = this.get("key");

            this.get("buttons").forEach(function(button) {
                Ember.set(button, "selected", obj && (button.get(key) === obj.get(key)));
            });

            if (obj) {
                this.sendAction('stateChanged', obj);   
            }
        }
    },

    didInsertElement: function() {
        this.send("setSelected", this.get("default"));
    }

});

<div id="ember554" class="ember-view mutex-button-set">
    <div data-ember-action="559" class="mutex-button selected">
        <div>Required</div>
    </div>  
    <div data-ember-action="563" class="mutex-button ">
        <div>Not Required</div>
    </div>  
</div>