Запись значений переключателей в ember

Question

Я довольно новичок в Ember (с использованием версии 0.2.3). У меня есть компонент с несколькими вычисленными значениями. Они собирают эти вычисленные значения из полей ввода:

export default Component.extend({ 
    loanAmount : 200000, 
    deductible : 0, 
    debtInt : 5, 

    getLoanCosts: computed('loanAmount', 'debtInt', function(){ 
    return (get(this, 'debtInt')/12) * get(this, 'loanAmount'); 
    }) 

На моих template.hbs, у меня есть поле ввода {{ input value=loanAmount }} и я могу назвать {{getLoanCosts}} в моих template.hbs, чтобы показать, вычисленную стоимость. Это отлично работает для ввода текста/числа.

Однако мне нужно иметь вход радиокнопки с двумя значениями (Да и Нет). Это должно совпадать с значением deductible в моем компоненте (т. Е. Является ли этот кредит франшизой?). Однако, если это так:

Yes {{ input type="radio" name="deductible" value=deductible }} 
No {{ input type="radio" name="deductible" value=deductible }} 

Я не могу установить значения для этих двух входов, как я могу с прямым HTML. Если я установил значение = 0 и значение = 1, они никогда не будут обновляться в моем компоненте. Как я могу обновить свой deductible в компоненте на основании того, выбрано ли Yes или No?

Answer 1

Да так Ember не имеет встроенной поддержки для радио-кнопки. Попробуйте создать свой собственный компонент! И, сделав свой собственный, я имею в виду бесстыдную кражу одного из internet.

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    tagName: 'input', 
    type: 'radio', 
    attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name', 'disabled'], 

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

И в компоненте, радио-кнопка по-прежнему имеет значение, но связывание отбора переданного в зарегистрированной собственности:

Yes{{radio-button value='1' checked=choice}} 
No{{radio-button value='0' checked=choice}} 

Answer 2

Оба ваших переключателя имеют то же значение, что и не должны. Они должны быть связаны с разными свойствами, но имеют разные значения. Вот рабочий пример компонента переключателя.

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'); 
    }.property() 
}); 


App.ApplicationController = Ember.Controller.extend({ 
    deductible: 0 
}); 

Yes {{view Ember.RadioButton selectionBinding="deductible" value=1 name="deductible"}} 
No {{view Ember.RadioButton selectionBinding="deductible" value=0 name="deductible"}} 

http://jsbin.com/gotubuhasu/1/edit

Answer 3

component.hbs

<label>No</label> 
{{input click=(action "clicky" false) type="radio" name="someAttr"}} 

<label>Yes</label> 
{{input click=(action "clicky" true) type="radio" name="someAttr"}} 

компонент .js

actions: { 
    clicky (value) { 
    this.set("someAttr", value) 
    } 
}