Menu
It seems that we have a different behaviour between two groups of browsers on the visibility of the OPTIONS of an html SELECT tag: if I set visible to false in the OPTION tag, the relevant drop down list item is hidden in Chrome and Firefox but it's still visible in IE8 and Safari.
http://jsfiddle.net/v8gyG/12/
Do you have any suggestion or am I doing something wrong? Please be aware that I can't use jquery.tmpl.js in this case, only hard coded SELECT/OPTION tags
427
KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers build rich and responsive websites.
Activating Knockout But since the browser doesn't know what it means, you need to activate Knockout to make it take effect. To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel);
The $data variable is a built-in variable used to refer to the current object being bound. In the example this is the one of the elements in the viewModel.
When the parameter transforms into true-like value (such as boolean true,or nonnull object or array ), the binding removes yourElement. style. display value, making it visible. If this is an observable property, then the binding will update visibility every time the property changes.
I know it was asked long time ago, but it's worth an answer since I found this question in Google while looking for an answer myself. I figured the solution so I'm back here to share it. Two years and "visible" still doesn't work**, so I checked "if" binding. Data-binding it inside option element made it hidden but selectable. Knockout has also something called: "containerless control flow syntax".
This works for me:
<!-- ko if: category.parent == 0 -->
<option data-bind="value: category.name, text: category.name"></option>
<!-- /ko -->
It works because if hides DOM. From knockout website:
if plays a similar role to the visible binding. The difference is that, with visible, the contained markup always remains in the DOM and always has its data-bind attributes applied - the visible binding just uses CSS to toggle the container element’s visibility. The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.
You can read more in documentation: http://knockoutjs.com/documentation/if-binding.html
Check various options here: http://jsfiddle.net/v8gyG/24/
** "visible" works in Chrome 27 and Firefox 21 but not with multiselect in Chrome.
<!-- ko if: --> works also in IE 10 and with multiselect in Chrome.
108
When you set the visible attribute, knockout just adds a style="display: none" attribute to the <option> element. This is not valid in IE. See:
style.display='none' doesn't work on option tags in chrome, but it does in firefox
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
