Comments (7)
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.
Related Issues (20)
- Is there any way to use WC3 valid attributes for rivets? HOT 2
- rv-value does not get applied on bind for input type range HOT 2
- Add components dynamically in rivets.js not working
- the rv-show doesn't work in this case
- View don't update when use [].pop.call(thisObj) to change array model.
- Link to dist on website is broken
- Not working on mobile HOT 1
- Including jQuery AFTER rivets breaks rv-value binder HOT 1
- DOM not updating when model changes on onclick HOT 4
- Reset a binding before updating it?
- Error in specific scenario
- Databinding to an instance of a class works in Chrome, but not any other browser HOT 1
- Why not use VueJs? HOT 2
- Release of tinybind 1.0 HOT 1
- How to bind the change event of input using lastest rivets
- Passing identical data into binders and getting different results HOT 1
- rv- breaks if we add to document HOT 1
- Separate scopes / do not pollute global "rivets" configuration
- Cart quantity error
- Get Callback when component args change
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rivets.