RadioButtonList in Ember, привязывая свойство модели к выбранному значению

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 зависимости от выбранного значения. Есть идеи, как это сделать?

EDIT:

Я пытаюсь код 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.

EDIT 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

Answer 1

Если вы не используете ни Em бер App Kit или уголек-кли, то все, что вам нужно сделать, это:

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, уголек-данных 1.0.0-beta.9): https://github.com/andrusieczko/radiobutton-example.git

Отказ от ответственности: Я не автор кода, я взял его где-то некоторое время назад.

Answer 2

Если вы не можете использовать элементы HTML <input>, попробуйте использовать этот компонент, который я написал.

Обратите внимание, что я использую Ember 1.10 и Ember-CLI.

my-template.js (контроллер)

import Ember from 'ember'; 
export default Ember.Controller.extend({ 

    options: [Ember.Object.create({ 
     name: "Required", 
     value: "1", 
    }), Ember.Object.create({ 
     name: "Not Required", 
     value: "0", 
    })], 

    actions: { 
     optionChanged: function(option) { 
      // option.value will either be 1 or 0 in this case. 
     } 
    } 
}); 

my-template.hbs

{{#mutex-button-set key="value" default=options.firstObject stateChanged="optionChanged" buttons=options as |button|}} 
    <div>{{button.name}}</div> 
{{/mutex-button-set}} 

mutex-button-set.hbs

{{#each button in buttons}} 
    <div {{bind-attr class=":mutex-button button.selected:selected"}} {{action "setSelected" button}}> 
     {{yield button}} 
    </div> 
{{/each}} 

mutex-button-set.js

import Ember from 'ember'; 
export default Ember.Component.extend({ 
    classNames: ['mutex-button-set'], 

    actions: { 
     setSelected: function(obj) { 
      var key = this.get("key"); 

      this.get("buttons").forEach(function(button) { 
       Ember.set(button, "selected", obj && (button.get(key) === obj.get(key))); 
      }); 

      if (obj) { 
       this.sendAction('stateChanged', obj); 
      } 
     } 
    }, 

    didInsertElement: function() { 
     this.send("setSelected", this.get("default")); 
    } 

}); 

HTML Сгенерированный

<div id="ember554" class="ember-view mutex-button-set"> 
    <div data-ember-action="559" class="mutex-button selected"> 
     <div>Required</div> 
    </div> 
    <div data-ember-action="563" class="mutex-button "> 
     <div>Not Required</div> 
    </div> 
</div>