CODEWITHSUNDEEP
ember.js
WebDevDude
WebDevDude

Reputation: 859

Binding Ember Model to Radio Fields

I have a simple input radio for toggling between active and inactive. I can not figure out how to get Ember to tie this to the model. My RAW html currently looks like this:

<fieldset class="checkboxes">

<label class="active" for="is_active">
  <input type="radio" id="is_active" name="status" value="1" checked="">
  <span>Active</span>
  <div class="input"></div>
</label>

<label class="sep">/</label>

<label class="inactive" for="inactive">
  <input type="radio" id="inactive" value="0" name="status">
  <span>Inactive</span>
  <div class="input"></div>
</label>

Does anyone have any ideas on how to do this using the Ember form model binding?

Upvotes: 0

Views: 179

Answers (1)

Jose CC
Jose CC

Reputation: 866

make your labels action, that will allow you to play with them in the controller. I hope this help....

<fieldset>
    <label class="option-buttons" for="reason1" {{action "setDeclineReason" "Too Expensive" on="mouseDown"}}>
        <input name="decline-reason" id="reason1" value="Too Expensive" type="radio">
        <span>
            <div class="check"></div>
            Too expensive
        </span>
    </label>
    <label class="option-buttons" for="reason2" {{action "setDeclineReason" "Lack of Amenities" on="mouseDown"}}>
        <input name="decline-reason" id="reason2" value="Lack of Amenities" type="radio">
        <span>
            <div class="check"></div>
            Lack of amenities
        </span>
    </label>
</fieldset>

App.DeclineController = Ember.Controller.extend({
  declineReason: null,
  decline: function(){
         var update = this.store.update('request', {
                id: this.get('model').id,
                user_decline_reason: this.get('declineReason')
            });
         update.save();
  actions:{
     setDeclineReason: function(declineReason){
         this.set('declineReason', declineReason);
     }
   }
});

Upvotes: 2

Related Questions