淘汰賽JS條件選項結合

Question

在Knockoutjs是有可能有一個選項的子元素結合的條件

如：

viewModel.array([{name: 1, show: true}, {name: 2, show: false}, {name: 3, show: true}]); 

<select data-bind="options: array, optionsText: name, if: show"></select> 

將顯示在選擇框：

1 
3 

Answer 1

結算此demo

您可以這樣做：

<select data-bind="value: selectedCountry , foreach : countryArray" > 
     <!-- ko if: show -->   
      <option data-bind="value : name, text : name "></option> 
     <!-- /ko --> 
</select> ​ 

function viewModel() { 

    var self = this; 
    this.countryArray = ko.observableArray([{"name" : "France" ,"show" : true}, 
              {"name" : "Italy" , "show" : true}, 
              {"name":"Germany" , "show" : false}]); 

    this.selectedCountry = ko.observable(""); 

} 

$(document).ready(function() { 

    var vm = new viewModel(); 
    ko.applyBindings(vm); 

})​ 

Answer 2

試試這個demo

這裏有一個2017年更新：要做到這一點（特別是沒有無容器條件綁定）來自於post-processing選項綁定淘汰賽文檔的最好方法，使用optionsAfterRender結合。 optionsAfterRender在版本中添加2.3

您的代碼應該是這樣的：

<select data-bind="value: selectedCountry , options : countryArray, optionsText: 'name', optionsAfterRender: setOptionsShow" ></select> ​ 

function viewModel() { 

    var self = this; 
    this.countryArray = ko.observableArray([{"name" : "France" ,"show" : true}, 
              {"name" : "Italy" , "show" : true}, 
              {"name":"Germany" , "show" : false}]); 

    this.selectedCountry = ko.observable(""); 
    this.setOptionsShow = function(option, item) { 
      ko.applyBindingsToNode(option, {visible: item.show}, item); 
     } 

} 

$(document).ready(function() { 

    var vm = new viewModel(); 
    ko.applyBindings(vm); 

})​