Binding to radio buttons about rivets HOT 7 CLOSED

Ah, I knew this wasn't working, thanks for reminding me. Fixed in #33. Your example should work fine on 0.2.2.

from rivets.

Working as expected now -- thanks!

On Thursday, July 19, 2012 at 9:56 PM, Michael Richards wrote:

Ah, I knew this wasn't working, thanks for reminding me. Fixed in #33.

---

Reply to this email directly or view it on GitHub:
#32 (comment)

from rivets.

I tried to do this with the most recent version of rivets and it seems to be having the same problem as before.

from rivets.

Sorry to dredge up this closed issue, but I was having the same problem as well (very similar to the initial example) with 0.6.8. The solution is to use rv-checked instead of rv-value, which is kind of non-intuitive (and should probably be documented somewhere).

Non-working example: http://jsfiddle.net/xFLPL/
Working example: http://jsfiddle.net/xFLPL/1/

Interesting note: If you look in the inspector for the first example, you'll see that the reason it doesn't work is that the value of each <input> is being overwritten immediately with the initial value of amount. This can be fixed by changing the definition of Rivets.binders.value.routine, as I've done in this example: http://jsfiddle.net/xFLPL/2/ . This introduces some extra complexity into the value binder though, so using rv-checked is probably preferable. I can submit a PR though if the fix is desired.

from rivets.

@caseygrun Yep, checked is the binder to use to bind to an element's checked property, and the value binder is to bind to an element's value property.

http://rivetsjs.com/docs/reference/#checked

Using the value binder to bind to the checked property (like http://jsfiddle.net/xFLPL/2/) is a bit misleading because radio inputs actually also have a value property, which I often also need to bind to if I want a dynamic list of radio buttons (I use a custom attr-* binder for this (see below) because a two-way binding is not necessary for the radio's value).

<p>Choose your favorite color:</p>

<ul>
  <li rv-each-color="colors">
    <input type="radio" rv-attr-value="color" rv-checked="user.favorite">
    { color }
  </li>
</ul>

<p>You chose { user.favorite }!</p>

Perhaps the value binder should be updated so that it behaves as a one-way binding to the value property when dealing with radio and checkbox inputs?

from rivets.

Yes, I had seen the description of the checked binder given in the documentation, but in that case it's the checked property of one radio button being set according to a boolean model value. This case is a little different—checked is being set according to comparison between the radio button's value and the model value; it wasn't obvious to me that the checked binder would do this. A simple example in the docs like this one would be very helpful I think.

I'm not sure I understand what you're proposing w/r/t the one-way binding of value for checkbox and radio buttons; isn't that already accomplished by using the attr-value binder as you've done above? In any case, I'm having a hard time thinking of a use case for the current behavior, where the value of every checkbox/radio button in a group will be overwritten by the initial model value, then two-way data binding keeps it stuck like that.

Anyway thanks for your help and the cool library.

from rivets.

@wardtwits Can you make a jsfiddle demonstrating your issue? Radio bindings work fine for me.

Remember that, rv-checked is only appropriate on the input type checkbox, not the radio. The checkbox is used to represent a boolean value on one property.

Radio is used to represent a selected option, from many options, but only one.

Please paste a fiddle and I will help more.

from rivets.