knockoutjs：問題與選項標籤和可見性

Question

似乎我們有一個不同的行爲之間的兩個瀏覽器的選擇的HTML SELECT標籤的可見性： 如果我在OPTION標記中設置可見爲false，相關下拉列表項隱藏在Chrome和Firefox中，但在IE8和Safari中仍然可見。

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

你有任何建議或我做錯了什麼？ 請注意，我不能在這種情況下使用jquery.tmpl.js，只有硬編碼SELECT/OPTION標籤

Answer 1

我知道這是在很久以前問過，但是自從我在Google中發現這個問題並自己尋找答案時，這是值得回答的。我想到了解決方案，所以我回到了這裏分享它。兩年和「可見」仍然不起作用**，所以我檢查了「是否」綁定。數據綁定在選項元素內部使其隱藏但可選。 Knockout還有一個叫做「無容器控制流語法」的東西。

這個工作對我來說：

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

它的工作原理，因爲如果隱藏DOM。從淘汰賽網站：

如果對可見的綁定起着類似的作用。差異是 ，在可見的情況下，包含的標記始終保留在DOM中，並且 始終應用其數據綁定屬性 - 可見綁定僅使用CSS切換容器元素的可見性。但是，if綁定在物理上添加或刪除DOM中的包含標記， 並且僅在表達式爲true時纔將綁定應用於後代。

你可以閱讀更多的文檔：這裏http://knockoutjs.com/documentation/if-binding.html

檢查各種選項：http://jsfiddle.net/v8gyG/24/

** 「看得見」 的作品在Chrome 27和Firefox 21，但不與Chrome的多選。

<!-- ko if: -->也適用於IE 10和Chrome中的多選。

Answer 2

當您設置visible屬性，淘汰賽只是增加了一個style="display: none"屬性爲<option>元素。這在IE中無效。請參閱：

style.display='none' doesn't work on option tags in chrome, but it does in firefox

Answer 3

的代碼表明您使用的是選擇了選擇頁碼。考慮創建一個包含選項的DependentObservable。

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) 

並在視圖：

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

當頁2被選擇，則Page變量將包含{標號： '帕格2'，值：2}