2015-11-02 2 views
0

У меня есть простая входная радиостанция для переключения между активными и неактивными. Я не могу понять, как заставить Эмбера привязать это к модели. Мой RAW HTML в настоящее время выглядит следующим образом:Binding Ember Model to Radio Fields

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

Кто-нибудь есть какие-либо идеи о том, как сделать это, используя форму модели Ember связывания?

+0

Я рекомендую вам использовать добавочный переключатель кнопки Ember: https://github.com/yapplabs/ember-radio-button – Gaurav

ответ

2

Сделайте свои ярлыки действиями, которые позволят вам играть с ними в контроллере. Я надеюсь, что эта помощь ...

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