我已经阅读并尝试了一些代码,但没有任何工作像我想要的那样……这是我现在拥有的代码。

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);


控制器:

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>


控制器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版

最佳答案

如果您没有使用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

免责声明:我不是代码的作者,我是一段时间前从某个地方获取的。

10-07 19:39
查看更多