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>
浏览器显示的结果: