knockoutjs 容易混淆的知识点(select 绑定)

一.绑定属性

　　1.select单选项和多选项绑定

　　options 一定是个数组，是select 的drop-down list的每个element,如果options的每一项是个字符串，可以不用设置optionsText,如果options 每一项是个对象，需要设置optionsText和optionsValue 告诉knockout绑定对象的哪个属性。

 1 <html>
 2     <head>
 3        
 4         <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"></script>
 5 
 6         <script language="javascript">
 7 
 8             window.onload  = function(){
 9 
10                      var myViewModel = {
11                             items:["a","b","c","d"]
12                         };
13 
14                  ko.applyBindings(myViewModel);
15              };
16 
17         </script>
18 
19     </head>
20     <body>
21        <select data-bind="options:items" />
22     </body>
23 </html>

浏览器中查看的结果如下：

如果绑定的options 是个对象。

<html>
    <head>
       
        <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"></script>

        <script language="javascript">

            function item(name,value){
                this.name = name;
                this.value = value;
            }
            window.onload  = function(){

                     var myViewModel = {
                            items:[new item("a","a1"),new item("b","b1"),new item("c","c1")]
                        };

                 ko.applyBindings(myViewModel);
             };

        </script>

    </head>
    <body>
       <select data-bind="options:items" />
    </body>
</html>

浏览器呈现的结果如下：

必须设置optionsText和optionsValue的值

 1 <html>
 2     <head>
 3        
 4         <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"></script>
 5 
 6         <script language="javascript">
 7 
 8             function item(name,value){
 9                 this.name = name;
10                 this.value = value;
11             }
12             window.onload  = function(){
13 
14                      var myViewModel = {
15                             items:[new item("a","a1"),new item("b","b1"),new item("c","c1")]
16                         };
17 
18                  ko.applyBindings(myViewModel);
19              };
20 
21         </script>
22 
23     </head>
24     <body>
25        <select data-bind="options:items, optionsText:'name' optionsValue:'value'" />
26     </body>
27 </html>

浏览器呈现的结果如下，设置了optionsText就有每一项的text，设置了optionsValue就有每一项的value

value 和text 属性是用来做双向绑定操作的，如果想纪录下当前选中的value值和text值。就需要设置该项

 1 <html>
 2     <head>
 3        
 4         <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"></script>
 5         <script language="javascript">
 6 
 7             function item(name,value){
 8                 this.name = name;
 9                 this.value = value;
10             }
11 
12             window.onload  = function(){
13 
14                      var myViewModel = {
15                             items:ko.observableArray([new item("a","a1"),new item("b","b1"),new item("c","c1")]),
16                             selectitemvalue:ko.observable("")
17                         };
18 
19                  ko.applyBindings(myViewModel);
20              };
21 
22         </script>
23 
24     </head>
25     <body>
26        <select data-bind="options:items, optionsText:'name',
27         optionsValue:'value',optionsCaption: 'Choose...',value:selectitemvalue" >
28         </select>
29         <span>
30             你当前选中的值是：<span data-bind="text:selectitemvalue"></span>
31         </span>
32           
33     </body>
34 </html>

浏览器显示的结果：

select 标签多选，需要设置size，和multiple标签,size 是可select 可见项，multiple 表示多选项

1  <select data-bind="options:items, optionsText:'name',
2    
3         optionsValue:'value',optionsCaption: 'Choose...',value:selectitemvalue"
4         size="5"   
5         multiple="true" >
6         </select>

多选项的值保存容器可以用selectedOptions属性进行绑定。结果就是你选中的值的集合，该数组中的每一项是个字符串。

<html>
    <head>
       
        <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"></script>
        <script language="javascript">

            function item(name,value){
                this.name = name;
                this.value = value;
            }

            window.onload  = function(){

                     var myViewModel = {
                            items:ko.observableArray([new item("a","a1"),new item("b","b1"),new item("c","c1")]),
                            selectitemvalues:ko.observableArray()
                        };

                 ko.applyBindings(myViewModel);
             };

        </script>

    </head>
    <body>
       <select data-bind="options:items, optionsText:'name',
        selectedOptions:selectitemvalues,
        optionsValue:'value',optionsCaption: 'Choos item...'"
        size="5"   
        multiple="true"
        >
        </select>
        <span>
            你当前选中的值是：<select data-bind="options:selectitemvalues"></select>
        </span>
          
    </body>
</html>

浏览器显示的结果：

posted on 2018-04-24 20:24 michelle_phone 阅读(1450) 评论(0) 收藏举报