Ember中的RadioButtonList，将模型属性绑定到选定的值

Question

我正在阅读并尝试一些代码，但没有任何工作像我想要的那样......这就是我现在的代码。

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>

查看radiobutton.js：

Ember.RadioButton = Ember.View.extend({
    tagName: "input",
    type: "radio",
    attributeBindings: ["name", "type", "value", "checked:checked:"],
    click: function () {
        this.set("selection", this.$().val())
    },
    checked: function () {
        return this.get("value") == this.get("selection");

        if (this.get("selection") == "Required") {
            $('#panelAccommodation').style.display = "block";
        }

        if (this.get("selection") == "Not Required") {
            $('#panelAccommodation').style.display = "none";
        }

    }.property()

我想从这些RadioButtonLists中获取的是能够检索所选项的值，以便我可以将其作为POST发送到api并使用所选值来隐藏/显示所选值的div dependidng。关于如何做到这一点的任何想法？

编辑：

我正在尝试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,

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>

仍未在POST请求中发送所选值。

编辑2：

我已经编写了一些代码，在所有其他方面的行为都像我想要的那样，但它仍然没有将所选值绑定到我想要的属性。

查看radio.js：

Ember.Radio = Ember.View.extend({
    tagName: "input",
    type: "radio",
    attributeBindings: ["name", "type", "value", "checked:checked:"],
    click: function () {
        this.set("selection", this.$().val())

        if(this.get("selection") === "acRequired") {
            $('#panelAccommodation').css("display", "block");
            this.set("selection", "Required");
            selectionBinding: "App.event.accommodation"
        }
        if (this.get("selection") === "acNotRequired") {
            $('#panelAccommodation').css("display", "none");
            this.set("selection", "Not Required");
            selectionBinding: "App.event.accommodation"
        }
        if (this.get("selection") === "flRequired") {
            $('#panelFlight').css("display", "block");
            this.set("selection", "Required");
            selectionBinding: "App.event.flight"
        }
        if (this.get("selection") === "flNotRequired") {
            $('#panelFlight').css("display", "none");
            this.set("selection", "Not Required");
            selectionBinding: "App.event.flight"
        }
    },

    checked: function () {
        return this.get("value") == this.get("selection");
    }.property()
});

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>

controller new.js：

App.EventsNewController = Ember.ObjectController.extend({

    accommodation: "Not Required",
    flight: "Not Required",

    actions: {
        save: function () {
            var self = this;
            this.get('model').set('status', 'Created');
            this.get('model').save().then(function () {
                self.transitionToRoute('events.table');
            });
        }
    }
});

PS：我正在使用Ember版本1.6.1

Answer 1

如果您没有使用Ember App Kit或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.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}}一起使用：）

有帮助吗？

工作示例（Ember 1.6.1，ember-data 1.0.0-beta.9）： https://github.com/andrusieczko/radiobutton-example.git

免责声明：我不是代码的作者，我不久前从某个地方拿过它。

Answer 2

如果您可以处理不使用HTML <input>元素，请尝试使用我编写的这个组件。

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

my-template.js（控制人员）

import Ember from 'ember';
export default Ember.Controller.extend({

    options: [Ember.Object.create({
        name: "Required",
        value: "1",
    }), Ember.Object.create({
        name: "Not Required",
        value: "0",
    })],

    actions: {
        optionChanged: function(option) {
            // option.value will either be 1 or 0 in this case.
        }
    }
});

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-button-set.hbs

{{#each button in buttons}}
    <div {{bind-attr class=":mutex-button button.selected:selected"}} {{action "setSelected" button}}>
        {{yield button}}
    </div>  
{{/each}}

mutex-button-set.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>