[英]Knockout js conditional options binding
在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
查看此演示
您可以这样做:
<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);
})
试试这个演示
这是2017年的更新:做到这一点的最佳方法(尤其是没有无容器条件绑定的情况)来自使用optionsAfterRender绑定进行后期处理选项绑定的敲除文档。 在版本2.3中添加了optionsAfterRender
您的代码如下所示:
<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);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.