Knockoutjs: problem with option tags and visibility

Question

It looks like we have a different behavior between the two browser groups regarding the OPTIONS visibility of the html SELECT tag: if I set the visible value to false in the OPTION tag, the corresponding drop-down list item is hidden in Chrome and Firefox, but it still displays in IE8 and Safari.

http://jsfiddle.net/v8gyG/12/

Do you have a suggestion or am I doing something wrong? Keep in mind that I cannot use jquery.tmpl.js in this case, only the hardcoded SELECT / OPTION tags

Answer 1

, , , Google, . , , . "" **, "" . , . " ".

:

   <!-- ko if: category.parent == 0 -->
     <option data-bind="value: category.name, text: category.name"></option>
   <!-- /ko -->

, DOM. :

. , , DOM - CSS . , DOM, , .

: http://knockoutjs.com/documentation/if-binding.html

: http://jsfiddle.net/v8gyG/24/

** "visible" Chrome 27 Firefox 21, Chrome.

<!-- ko if: --> IE 10 Chrome.

Answer 2

visible, style="display: none" <option>. IE. :

style.display = 'none' chrome, firefox

Answer 3

The code suggests using the selection to select the page number. Consider creating a DependentObservable that contains parameters.

viewModel.Pages = ko.dependentObservable(function() {
  var pages = []
  for (var i=0 ; i < this.NumPages() ; ++i) {
    pages.push({label: "Pag " + (i+1), value: (i+1)})
  }
  return pages;
}, viewModel)

And in the view:

<select data-bind="value: Page, options: Pages, optionsText: 'label'></select>

When Page 2 is selected, the variable Pagewill contain {label: 'Pag 2', value: 2}