gmac / backbone.epoxy

Declarative data binding and computed models for Backbone
http://epoxyjs.org
MIT License
615 stars 89 forks source link

Confusion about optionsEmpty vs optionsDefault vs a select placeholder #113

Open tkwidmer opened 9 years ago

tkwidmer commented 9 years ago

Hey. I have a clarification question / issue with how the select data-binding works. Right now it looks like in the source code defining optionsEmpty creates an option just like another other option but only if numOptions and and optionsDefault don't exist. So in other words if you don't pass any options and don't pass an optionsDefault you will end up with a 1 options select that is essentially a disabled select. This isn't really what I thought it was - the documentation led me to believe it operated much like the placeholder on a regular html input. Where it would generate a disabled option within the select that would prompt the user to 'select one.' or something...

It should be pretty easy to implement. You could do it with another bindingHandler called optionsPlaceholder which would be rendered at the top of the list similar to defaultValue. This would create an option which would default to being the selected option and would be a disabled option. defaultValue could also be refactored to be made disabled if the handler placeholder:true was passed or something.

If this sounds ok, I can try to submit a PR. Or if there is a way to get it done already -- please let me know

Thanks,

tkwidmer commented 9 years ago

I think my proposal is this, add a way to make defaultValue a 'disabled option' so that the rendered html would look like this if there is no value for the field on page load. IF and only IF the bindingHandler "placeholder:true" is passed in.

  <option value="" disabled selected>Select One</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>

Resulting in this in the browser screen shot 2015-03-11 at 4 51 44 pm screen shot 2015-03-11 at 4 52 11 pm