javascript - Knockoutjs条件付きオプションバインディング

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

このデモをチェックしてください

あなたはこのようにそれを行うことができます：

 <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

このデモをお試しください

2017年の更新は次のとおりです。これを行うための最良の方法（特にコンテナレス条件付きバインディングなし）は、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);

})​