How to use a RadioButtonList and get the selected value with Ember?

Question

I'm new to Ember and I'm doing an asp.net web api that's called using Ember and on a form I'm making I want to be able to get the value the user selected. How do I do this?

An example of one of the RadioButtonLists I want to use with Ember:

   <div class="form-group">
       <label for="nationalTransportation">3.1. NATIONAL TRANSPORTATION (*)</label>
       <div class="radio">
            <label><input type="radio" name="National Transportation" value="Not Required">Not Required</label>
       </div>
       <div class="radio">
            <label><input type="radio" name="National Transportation" value="Public Transportation">Public Transportation</label>
       </div>
       <div class="radio">
            <label><input type="radio" name="National Transportation" value="Own vehicle">Own vehicle (subject to approval)</label>
       </div>
       <div class="radio">
             <label><input type="radio" name="National Transportation" value="Car Rental">Car Rental (subject to approval)</label>
       </div>
   </div>

Answer 1

Build a view for the RadioButtonList like so:

App.EventRadioView = Ember.View.extend({

    tagName: 'input',
    type: 'radio',
    attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name'],

    htmlChecked: function () {

        if (this.get('value') === 'Required' && this.get('name') === 'accommodation') {
            $('#panelAccommodation').css("display", "none");
        } else if (this.get('value') === 'Not Required' && this.get('name') === 'accommodation') {
            $('#panelAccommodation').css("display", "block");
        } else if (this.get('value') === 'Required' && this.get('name') === 'flight') {
            $('#panelFlight').css("display", "none");
        } else if (this.get('value') === 'Not Required' && this.get('name') === 'flight') {
            $('#panelFlight').css("display", "block");
        }
        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')
});

and then just use it in the html :

{{radio-button checked=model.nationalTransportation value=ntNotRequired}}