学习KnockOut第三篇之List
学习KnockOut第三篇之List
欲看此篇---------------------------------------------可先看上篇。
第一步，先搭建一个大概的框架起来。至于绑定什么的，我们稍后慢慢进行。可能会有人问为什么我那个位置要写一个form，关于这个呢，且埋一伏笔，稍后说明原由。 我们要做的是，当点击“Add”按钮时能将文本框里的值加入的下拉框里，当我们选中下拉框里的选项时点击"Remove"也能进行删除操作，同样，当点击“Sort”时也能对下拉框里的选项进行排序。有代码和图：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <title> mutuDu's List</ title> 5 </head > 6 <body > 7 <form> 8 New Friend: 9 <input /> 10 <button> Add</ button> 11 </form> 12 <p> My Friend:</ p> 13 <select></ select> 14 <div> 15 <button> Remove</ button> 16 <button> Sort</ button> 17 </div> 18 </body > 19 </html> 20 <script src="knockout-2.2.0.js"></ script> 21 <script type="text/javascript"> 22 23 </script>
第二步，下拉框里什么值都没有，看着真难受。那么，就来写一下下拉框里的绑定，也给下拉框里一些默认的值吧。下拉框是用<select>标签的。这里就会涉及到options绑定，其绑定的往往是一个是数组，而就不是单独一个值了。这个会用到ko.observableArray()表示绑定的数组。和ko.observable()有点类似，只是一个是绑定的数组，一个是绑定的单个的值。如果要在options里选定一个默认的选项，就需要用到selectedOptions了。这里顺便将input里的value绑定成一个空值。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <title> mutuDu's List</ title> 5 </head > 6 <body > 7 <form> 8 New Friend: 9 <input data-bind="value:itemToAdd" /> 10 <button> Add</ button> 11 </form> 12 <p> My Friend:</ p> 13 <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select > 14 <div> 15 <button> Remove</ button> 16 <button> Sort</ button> 17 </div> 18 </body > 19 </html> 20 <script src="knockout-2.2.0.js"></ script> 21 <script type="text/javascript"> 22 var ListViewModel = function (items) { 23 this.itemToAdd = ko.observable( ""); 24 this.selectedItem = ko.observableArray([ "Lina"]);//绑定数组里的元素不能忘了中括号。 25 this.items = ko.observableArray(items); 26 }; 27 ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ])); 28 </script>
第三步，就是在我写了“New Friend”且点击了“Add”按钮后将我的新朋友加入到我的“My Friend”的下拉框中去。这里就会讲到我刚才所说的埋下的伏笔了。也就会用到submit绑定。而submit就是用来绑定到form表单里的。当我们submit时会执行我们定义的函数，而不会将其提交到服务器。这也是submit的一个作用，阻止其提交到服务器，而是执行我们的函数。那么我们写一个函数吧，当点击时这个按钮时就执行这个函数。注意写法，sumbit绑定是在form里写绑定的，与下面按钮的类型相对应（type=button）。
且说一下代码里的一个函数引发的其他函数：
- ListViewModel .items.push(new value);在数组末尾添加一个新项。
- ListViewModel .items.sort(new value); 看到上一个，也应该知道这个是给数组排序。
- ListViewModel .items.reverse(new value);那么，这个是翻转数组还是翻转数组？
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <title> mutuDu's List</ title> 5 </head > 6 <body > 7 <form data-bind="submit:addItem"> <!--这里写submit绑定，和下面的submit按钮相对应，执行addItem方法。--> 8 New Friend: 9 <input data-bind="value:itemToAdd" /> 10 <button type="submit"> Add</ button><!--type的类型的是submit--> 11 </form> 12 <p> My Friend:</ p> 13 <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select > 14 <div> 15 <button> Remove</ button> 16 <button> Sort</ button> 17 </div> 18 </body > 19 </html> 20 <script src="knockout-2.2.0.js"></ script> 21 <script type="text/javascript"> 22 var ListViewModel = function (items) { 23 this.itemToAdd = ko.observable( ""); 24 this.selectedItem = ko.observableArray([ "Lina"]); 25 this.items = ko.observableArray(items); 26 //这里就是点Add时执行的方法。 27 this.addItem = function() { 28 this.items.push( this.itemToAdd());//push或者sort应该是蛮好理解的吧。 29 this.itemToAdd( ""); 30 }; 31 }; 32 ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ])); 33 </script>
第四步，将选中的项删除，或者将数组排序，也就是一个click绑定了，当点击删除时删除相应的选中项，当点击排序时，就给排个序。其实数组是有一些默认的函数的。
- ListViewModel .items.remove(someItem);删除所有等于someItem的元素并将被删除元素作为一个数组返回。
- ListViewModel .items.removeAll(['someItem',5926,'undefined']);删除等于'someItem',5926,或者undefined的元素并将删除之元素作为数组返回。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <title> mutuDu's List</ title> 5 </head > 6 <body > 7 <form data-bind="submit:addItem"> 8 New Friend: 9 <input data-bind="value:itemToAdd" /> 10 <button type="submit"> Add</ button> 11 </form> 12 <p> My Friend:</ p> 13 <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select > 14 <div> 15 <button data-bind ="click:removeSelected">Remove</ button><!--click绑定,执行下面的删除函数--> 16 <button data-bind="click:sortItems"> Sort</ button><!--click绑定，执行下面的排序函数--> 17 </div> 18 </body > 19 </html> 20 <script src="knockout-2.2.0.js"></ script> 21 <script type="text/javascript"> 22 var ListViewModel = function (items) { 23 this.itemToAdd = ko.observable( ""); 24 this.selectedItem = ko.observableArray([ "Lina"]); 25 this.items = ko.observableArray(items); 26 this.addItem = function() { 27 this.items.push( this.itemToAdd()); 28 this.itemToAdd( ""); 29 }; 30 //这里是点击删除时的方法。 31 this.removeSelected = function() { 32 this.items.removeAll( this.selectedItem()); 33 this.selectedItem([]); //注意括号是不能掉了的。 34 }; 35 //这里是写排序的方法 36 this.sortItems = function() { 37 this.items.sort();//上面有说到这个方法。 38 }; 39 }; 40 ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ])); 41 </script>
楼主，这个sort排序是按什么规律排？
数字是排在最前面的，按小大的顺序排，然后是大写字母开头的文字，接着是小字字母开头的文字，也就是大Z是在小a前面的，如果有数字，数字则是在最前面的，按从小到大的顺序。
明白了，你的这个排序的话，如果只有一个选项的话，那么这个按钮也就没什么意义了。
恩，这个倒还真是这样。那么应该怎么办比较好一点呢。
楼主，你前面讲过的嘛，enable绑定嘛。
了然，咱们就可以enable绑定一下。如若选项的长度不大于1，那么就将此按钮禁用（至于要不要在禁用的同时将按钮上的文字修改一下，感兴趣的可以尝试一下，上一篇有扯到过这个）。
对了，当然，楼主，不止这里哦，Add按钮，也可以根据input里的内容有无进行enable绑定。Remove也可以做到当没有选项时就不让按钮不可用嘛。
确实如此，容我修改一下。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <title> mutuDu's List</ title> 5 </head > 6 <body > 7 <form data-bind="submit:addItem"> 8 New Friend: 9 <input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" /><!--当输入字符时就自动更新ViewModel--> 10 <button type="submit" data-bind="enable:itemToAdd().length>0">Add </button> <!--加了enable绑定--> 11 </form> 12 <p> My Friend:</ p> 13 <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select > 14 <div> 15 <button data-bind="click:removeSelected,enable:selectedItem().length>0">Remove</ button><!--加了enable绑定--> 16 <button data-bind="click:sortItems,enable:items().length>1">Sort </button> <!--加了enable绑定--> 17 </div> 18 </body > 19 </html> 20 <script src="knockout-2.2.0.js"></ script> 21 <script type="text/javascript"> 22 var ListViewModel = function (items) { 23 this.itemToAdd = ko.observable( ""); 24 this.selectedItem = ko.observableArray([ "Lina"]); 25 this.items = ko.observableArray(items); 26 this.addItem = function() { 27 this.items.push( this.itemToAdd()); 28 this.itemToAdd( ""); 29 }; 30 this.removeSelected = function() { 31 this.items.removeAll( this.selectedItem()); 32 this.selectedItem([]); 33 }; 34 this.sortItems = function() { 35 this.items.sort(); 36 }; 37 }; 38 ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ])); 39 </script>
嗯，楼主，你怎么将把那个<input>标签里加参数了，怎么换成了" <input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" />"?
是这样的。ko会将VM对应的属性值自动更新。只是其默认的是当离开焦点的时候，ko才会自动更新这个值。这个效果不是很好，比如，就这代码如若不加这个第二个参数的代码的话，我们写了要添加的值非得将鼠标在外面点一下按钮才显示可用。针对此种不太友好的地方，我们就可以通过第二个参数改变其什么时候自动更新值了。也就是"valueUpdate"这个参数。“afterkeydown”则表示当用户开始输入字符的时候（当敲下去后）就自动了。
动态效果图略（楼主还不会弄，想学来着，此处还请园友指导下，以后会了会补上。）
第三篇学习笔记就到这里了。
浙公网安备 33010602011771号