I'm trying to bind a set of radio buttons to a backbone model using epoxy.js. I want the model to update with the value of the radio button selected but can't seem to get it working. All the other fields I'm using (text fields, selects, checkboxes) work as expected, just the radio buttons I'm having problems with.
The simplified code below is what I have so far. The model just stays with whatever the default is, even when selecting a different radio button. I would expect the amount value in the model to be updated to whatever the value of the radio button selected is.
Model:
Backbone.Model.extend({ defaults: { amount: '' } } View:
Backbone.Epoxy.View.extend({ bindings: { "input[name='amount']:checked": "value:amount" } } HTML:
<input name="amount" type="radio" value="10"> <input name="amount" type="radio" value="20"> <input name="amount" type="radio" value="30"> 4 Answers
The solution for me was to use inline bindings rather than in the view file as I was originally doing. Doesn't fix the issue but at least it's a solution.
I've never used epoxy.js but I think it should be familiar to regular views. You should listen a correct event (click or change) for your view:
events: { 'click input[name=amount]:checked': 'changeAmount' }, changeAmount: function() { // your code here }, From the docs it seems like theres a second argument to bindings which is the event to register:
bindings: { "input[name='amount']:checked": "value:amount,events:['keyup']" } Epoxy offers a checked binding handler for radios/checkboxes so the inline binding would be:
<input name="amount" type="radio" value="10"> <input name="amount" type="radio" value="20"> <input name="amount" type="radio" value="30"> I've not attempted to do this via the view file but I believe the equivalent would be to give each radio a unique id and include all of them in the bindings list e.g.
Backbone.Epoxy.View.extend({ bindings: { "#amount10Radio": "checked:amount", "#amount20Radio": "checked:amount", "#amount30Radio": "checked:amount" } } 
