Open remy opened 8 years ago
For a <select>
you need at least two things:
<option>
s.If you set an non-existent value it should just not select an <option>
.
One really nice feature which I haven't seen in other libraries is support for the disabled attribute, which could be another value in the data array.
<select>
s have intrinsic <optgroup>
s as well, just for added fun...
I agree with greginns points, also I would like to bind to an array of objects with "key"/"value" properties. Showing the value and binding on the key. Would this be possible?
Change this: "var valueSetters = ['SELECT', 'INPUT', 'PROGRESS', 'TEXTAREA'];" TO var valueSetters = ['OPTION', 'INPUT', 'PROGRESS', 'TEXTAREA'];
Also change this: if (element.nodeName === 'INPUT' || element.nodeName === 'SELECT' || element.nodeName === 'TEXTAREA') { to if (element.nodeName === 'INPUT' || element.nodeName === 'OPTION' || element.nodeName === 'TEXTAREA') {
The change isn't as simple as that. Sure, it fixes the options being set via an array, but then the value (in bind) is coersed from the array to a string.
These suggested changes half work (missing tests tho), but it raises the larger question: is bind.js okay with the value type magically changing?
I agree with you. I still ahve problems after that. For exemple when I push a value to the array , the other value are changed also. (So the changes that has been made on those other value are lost.)
Hi the issue with select element in lib file it working fine with https://cdn.rawgit.com/remy/bind/928c52ce335d6fd2c824b536a97efa460554b9e0/dist/bind.min.js seems something breaking in non-minified version
Just a heads up... There were two issues I had which I was able to fix: (bind.js not the minified version)
My SELECTs defined in HTML were being wiped out by creating a bind to it. FIX: change var valueSetters = ['OPTION', 'INPUT', 'PROGRESS', 'TEXTAREA']; to var valueSetters = ['SELECT', 'INPUT', 'PROGRESS', 'TEXTAREA'];
My binding to my SELECTs were not updating upon selecting a new value from the view. FIX: Line 324 this event is defined: var event = { //select: 'change', checkbox: 'change', radio: 'change' }[element.type];
This should be changed to
var event = { 'select-one': 'change', checkbox: 'change', radio: 'change' }[element.type];
The issue is that the type of a node SELECT is actually 'select-one'... if 'select-one' is not in quotes, the script will break due to the hyphen. Be sure to include the hyphen.
If you are manually changing the minified version the section I would be talking out is referenced as:
i={ checkbox:"change",radio:"change"}[n.type]
and should be changed to
i={'select-one': "change", checkbox:"change",radio:"change"}[n.type]
@remy
A few issues have been raised about
select
elements not working, and it's definitely right, I started to look at the issue and it raises some questions.It sort of makes sense that if the bound object is an array, each element in the array would be an
option
element. However, the point of changing the value of aselect
is to set the value of theselect
not particularly change the values.This kind of goes against how bind.js works, since you might think the closest comparison is the
ul
element, however, when the array is changed against theul
, the contents of theul
changes entirely.I feel like the callback to the bound object in the case of a
select
, should give the new set value.Issues around this are:
option
list of theselect
element?select
from the bound object? If so, I can't see how without a feature change.For reference, this is what a
ul
data binding looks like: