javascript - Ember 中的 RadioButtonList，将模型属性绑定(bind)到所选值

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。关于如何做到这一点有什么想法吗？

编辑:

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

Controller :

App.EventsNewController = Ember.ObjectController.extend({

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

    accommodation: null,

索引.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:

我编写了一些代码，这些代码在所有其他方面都表现得像我想要的那样，但它仍然没有将所选值绑定(bind)到我想要的属性。

查看 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()
});

索引.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);

然后，在你的 Controller 中:

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

免责声明:我不是代码的作者，我之前从某个地方获取了它。