Knockout.Js官网学习（options绑定）

时间 2019-12-02 标签 knockout.js knockout js 官网学习 options 绑定

前言javascript

options绑定控制什么样的options在drop-down列表里（例如：<select>）或者 multi-select 列表里（例如：<select size='6'>）显示。此绑定不能用于<select>以外的元素。关联的数据应是数组（或者是observable数组），<select>会遍历显示数组里的全部的项。java

对于multi-select列表，设置或者获取选择的多项须要使用selectedOptions绑定。对于single-select列表，你也能够使用value绑定读取或者设置元素的selected项。数组

Drop-down listapp

<p>Destination country: <select data-bind="options: availableCountries"></select></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var viewModel = {        
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])  
    };
    ko.applyBindings(viewModel);
    viewModel.availableCountries.push('China');
</script>

该参数是一个数组（或者observable数组）。对每一个item，KO都会将它做为一个<option> 添加到<select>里，以前的options都将被删除。函数

若是参数是一个string数组，那你不须要再声明任何其它参数。<select>元素会将每一个string显示为一个option。不过，若是你让用户选择的是一个JavaScript对象数组（不单单是string），那就须要设置optionsText和optionsValue这两个参数了。this

若是参数是监控属性observable的，那元素的options项将根据参数值的变化而更新，若是不是，那元素的value值将只设置一次而且之后不在更新。spa

若是对上面的select UI元素加上multiple="true"debug

<select data-bind="options: availableCountries" multiple="true"></select>

这能够说是Multi-select listcode

Drop-down list展现的任意JavaScript对象，不单单是字符串对象

<p>Destination country: <select data-bind="options: availableCountries" multiple="true"></select></p>
<p>    Your country:   
    <select data-bind="options: Countries,optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'">
    </select>
</p>
<div data-bind="visible: selectedCountry">
       You have chosen a country with population   
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var Country = function (name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };
    var viewModel = {        
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
        selectedCountry: ko.observable(),
        Countries: ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ])
    };
    ko.applyBindings(viewModel);
    viewModel.availableCountries.push('China');
</script>

optionsCaption

有时候，默认状况下不想选择任何option项。可是single-select drop-down列表因为每次都要默认选择以项目，怎么避免这个问题呢？经常使用的方案是加一个“请选择的”或者“Select an item”的提示语，或者其它相似的，而后让这个项做为默认选项。

咱们使用optionsCaption参数就能很容易实现，它的值是字符串型，做为默认项显示。例如：

KO会在全部选项上加上这一个项，而且设置value值为undefined。因此，若是myChosenValue被设置为undefined（默认是observable的），那么上述的第一个项就会被选中

Drop-down list展现的任意JavaScript对象，显示text是function的返回值

<select data-bind="options: Countries,
                   optionsText: function(item) { return item.countryName + ' (pop: ' + item.countryPopulation + ')' },
                   value: selectedCountry,
                   optionsCaption: 'Choose...'">    
</select>

optionsText

上面《Drop-down list展现的任意JavaScript对象，不单单是字符串》中展现的绑定JavaScript对象到option上 – 不单单是字符串。这时候你须要设置这个对象的那个属性做为drop-down列表或multi-select列表的text来显示。设置额外的参数optionsText将对象的属性名countryName做为显示的文本。

若是不想仅仅显示对象的属性值做为每一个item项的text值，那你能够设置optionsText 为JavaScript 函数，而后再函数里经过本身的逻辑返回相应的值（该函数参数为item项自己）。

optionsValue

和optionsText相似, 你也能够经过额外参数optionsValue来声明对象的那个属性值做为该<option>的value值。

经典场景：如在更新options的时候想保留原来的已经选择的项。例如，当你重复屡次调用Ajax获取car列表的时候，你要确保已经选择的某个car一直都是被选择上，那你就须要设置optionsValue为“carId”或者其它的unique标示符，不然的话KO找不知道以前选择的car是新options里的哪一项

selectedOptions

对于multi-select列表，你能够用selectedOptions读取和设置多个选择项。技术上看它是一个单独的绑定，有本身的文档，请参考： selectedOptions绑定。