学习KnockOut第三篇之List

欲看此篇---------------------------------------------可先看上篇。

         第一步，先搭建一个大概的框架起来。至于绑定什么的，我们稍后慢慢进行。可能会有人问为什么我那个位置要写一个form，关于这个呢，且埋一伏笔，稍后说明原由。 我们要做的是，当点击“Add”按钮时能将文本框里的值加入的下拉框里，当我们选中下拉框里的选项时点击"Remove"也能进行删除操作，同样，当点击“Sort”时也能对下拉框里的选项进行排序。有代码和图：

   
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head >

         <title> mutuDu's List</ title>

     </head >

     <body >

         <form>

             New Friend:

             <input />

             <button> Add</ button>

         </form>

         <p> My Friend:</ p>

         <select></ select>

         <div>

             <button> Remove</ button>

             <button> Sort</ button>

         </div>

     </body >

 </html>

 <script src="knockout-2.2.0.js"></ script>

 <script type="text/javascript">

 </script>

一个大概的样子

    
 
 
 
 
        第二步，下拉框里什么值都没有，看着真难受。那么，就来写一下下拉框里的绑定，也给下拉框里一些默认的值吧。下拉框是用<select>标签的。这里就会涉及到options绑定，其绑定的往往是一个是数组，而就不是单独一个值了。这个会用到ko.observableArray()表示绑定的数组。和ko.observable()有点类似，只是一个是绑定的数组，一个是绑定的单个的值。如果要在options里选定一个默认的选项，就需要用到selectedOptions了。这里顺便将input里的value绑定成一个空值。      
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head >

         <title> mutuDu's List</ title>

     </head >

     <body >

         <form>

             New Friend:

             <input data-bind="value:itemToAdd" />

             <button> Add</ button>

         </form>

         <p> My Friend:</ p>

         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >

         <div>

             <button> Remove</ button>

             <button> Sort</ button>

         </div>

     </body >

 </html>

 <script src="knockout-2.2.0.js"></ script>

 <script type="text/javascript">

     var ListViewModel = function (items) {

         this.itemToAdd = ko.observable( "");

         this.selectedItem = ko.observableArray([ "Lina"]);//绑定数组里的元素不能忘了中括号。

         this.items = ko.observableArray(items);

     };

     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));

 </script>

下拉框里没值看着真心难受。options绑定。

 
 
 
 
 
       第三步，就是在我写了“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);那么，这个是翻转数组还是翻转数组？
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head >

         <title> mutuDu's List</ title>

     </head >

     <body >

         <form data-bind="submit:addItem"> <!--这里写submit绑定，和下面的submit按钮相对应，执行addItem方法。-->

             New Friend:

             <input data-bind="value:itemToAdd" />

             <button type="submit"> Add</ button><!--type的类型的是submit-->

         </form>

         <p> My Friend:</ p>

         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >

         <div>

             <button> Remove</ button>

             <button> Sort</ button>

         </div>

     </body >

 </html>

 <script src="knockout-2.2.0.js"></ script>

 <script type="text/javascript">

     var ListViewModel = function (items) {

         this.itemToAdd = ko.observable( "");

         this.selectedItem = ko.observableArray([ "Lina"]);

         this.items = ko.observableArray(items);

         //这里就是点Add时执行的方法。

         this.addItem = function() {

             this.items.push( this.itemToAdd());//push或者sort应该是蛮好理解的吧。

             this.itemToAdd( "");

         };

     };

     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));

 </script>

新朋友你过来吧。submit绑定。

 
 
 
 
 
     第四步，将选中的项删除，或者将数组排序，也就是一个click绑定了，当点击删除时删除相应的选中项，当点击排序时，就给排个序。其实数组是有一些默认的函数的。
  • ListViewModel .items.remove(someItem);删除所有等于someItem的元素并将被删除元素作为一个数组返回。
  • ListViewModel .items.removeAll(['someItem',5926,'undefined']);删除等于'someItem',5926,或者undefined的元素并将删除之元素作为数组返回。
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head >

         <title> mutuDu's List</ title>

     </head >

     <body >

         <form data-bind="submit:addItem">

             New Friend:

             <input data-bind="value:itemToAdd" />

             <button type="submit"> Add</ button>

         </form>

         <p> My Friend:</ p>

         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >

         <div>

               <button data-bind ="click:removeSelected">Remove</ button><!--click绑定,执行下面的删除函数-->

             <button data-bind="click:sortItems"> Sort</ button><!--click绑定，执行下面的排序函数-->

         </div>

     </body >

 </html>

 <script src="knockout-2.2.0.js"></ script>

 <script type="text/javascript">

     var ListViewModel = function (items) {

         this.itemToAdd = ko.observable( "");

         this.selectedItem = ko.observableArray([ "Lina"]);

         this.items = ko.observableArray(items);

         this.addItem = function() {

             this.items.push( this.itemToAdd());

             this.itemToAdd( "");

         };

         //这里是点击删除时的方法。

         this.removeSelected = function() {

             this.items.removeAll( this.selectedItem());

             this.selectedItem([]); //注意括号是不能掉了的。

         };

         //这里是写排序的方法

         this.sortItems = function() {

             this.items.sort();//上面有说到这个方法。

         };

     };

     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));

 </script>

删除和排序，只是两个函数而已。

楼主，这个sort排序是按什么规律排？

      数字是排在最前面的，按小大的顺序排，然后是大写字母开头的文字，接着是小字字母开头的文字，也就是大Z是在小a前面的，如果有数字，数字则是在最前面的，按从小到大的顺序。
      明白了，你的这个排序的话，如果只有一个选项的话，那么这个按钮也就没什么意义了。
      恩，这个倒还真是这样。那么应该怎么办比较好一点呢。
      楼主，你前面讲过的嘛，enable绑定嘛。
      了然，咱们就可以enable绑定一下。如若选项的长度不大于1，那么就将此按钮禁用（至于要不要在禁用的同时将按钮上的文字修改一下，感兴趣的可以尝试一下，上一篇有扯到过这个）。
      对了，当然，楼主，不止这里哦，Add按钮，也可以根据input里的内容有无进行enable绑定。Remove也可以做到当没有选项时就不让按钮不可用嘛。
      确实如此，容我修改一下。 
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head >

         <title> mutuDu's List</ title>

     </head >

     <body >

         <form data-bind="submit:addItem">

             New Friend:

             <input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" /><!--当输入字符时就自动更新ViewModel-->

             <button type="submit" data-bind="enable:itemToAdd().length>0">Add </button> <!--加了enable绑定-->

         </form>

         <p> My Friend:</ p>

         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >

         <div>

             <button data-bind="click:removeSelected,enable:selectedItem().length>0">Remove</ button><!--加了enable绑定-->

             <button data-bind="click:sortItems,enable:items().length>1">Sort </button> <!--加了enable绑定-->

         </div>

     </body >

 </html>

 <script src="knockout-2.2.0.js"></ script>

 <script type="text/javascript">

     var ListViewModel = function (items) {

         this.itemToAdd = ko.observable( "");

         this.selectedItem = ko.observableArray([ "Lina"]);

         this.items = ko.observableArray(items);

         this.addItem = function() {

             this.items.push( this.itemToAdd());

             this.itemToAdd( "");

         };

         this.removeSelected = function() {

             this.items.removeAll( this.selectedItem());

             this.selectedItem([]);

         };

         this.sortItems = function() {

             this.items.sort();

         };

     };

     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));

 </script>

体验不够好。enable绑定和value的第二个参数。      

      嗯，楼主，你怎么将把那个<input>标签里加参数了，怎么换成了" <input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" />"?
      是这样的。ko会将VM对应的属性值自动更新。只是其默认的是当离开焦点的时候，ko才会自动更新这个值。这个效果不是很好，比如，就这代码如若不加这个第二个参数的代码的话，我们写了要添加的值非得将鼠标在外面点一下按钮才显示可用。针对此种不太友好的地方，我们就可以通过第二个参数改变其什么时候自动更新值了。也就是"valueUpdate"这个参数。“afterkeydown”则表示当用户开始输入字符的时候（当敲下去后）就自动了。
 
 
 
       动态效果图略（楼主还不会弄，想学来着，此处还请园友指导下，以后会了会补上。）
 
 
 
 
       第三篇学习笔记就到这里了。
 
 

学习KnockOut第三篇之List的更多相关文章

  1. RabbitMQ学习总结 第三篇：工作队列Work Queue

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  2. 我们一起学习WCF 第三篇头消息验证用户身份

    前言:今天我主要写的是关于头消息的一个用处验证用户信息 下面我画一个图,可以先看图 第一步:我们先开始做用户请求代码 首先:创建一个可执行的上下文对象块并定义内部传输的通道 using (Operat ...

  3. Egret入门学习日记 --- 第三篇 （书中 3.4 内容）

    第三篇 (书中 3.4 内容) 今天还是要把昨天项目运行后,EXML文件里的界面没有出现的问题解决了才行. 去了群里,没人回.去了官网看文档,看不懂. 不过倒是看到了一个好东西: 还挺便宜啊,一个月要 ...

  4. JavaWeb学习总结第三篇--走进JSP页面元素

    JavaWeb学习(三)—走进JSP页面元素 JSP:Java Server Pages,译为Java服务器页面.其脚本采用Java语言,继承了Java所有优点.JSP元素可以分为指令元素.脚本元素和 ...

  5. ASP.NET Core 学习笔记 第三篇 依赖注入框架的使用

    前言 首先感谢小可爱门的支持,写了这个系列的第二篇后,得到了好多人的鼓励,也更加坚定我把这个系列写完的决心,也能更好的督促自己的学习,分享自己的学习成果.还记得上篇文章中最后提及到,假如服务越来越多怎 ...

  6. R学习笔记 第三篇：数据框

    数据框(data.frame)用于存储二维表(即关系表)的数据,每一列存储的数据类型必须相同,不同的数据列的数据类型可以相同,也可以不同,但是,每列的长度必须相同.数据框的每列可以有唯一的命名,在已创 ...

  7. Asp.net core Identity + identity server + angular 学习笔记 (第三篇)

    register -> login 讲了 我们来讲讲 forgot password -> reset password  和 change password 吧 先来 forgot pa ...

  8. 编程学习笔记(第三篇)面向对象技术高级课程：绪论-软件开发方法的演化与最新趋势（3）软件开发的现状、UML扩展

    一.软件开发的现状 软件领域正在发生一个巨变,特别是近几年来,软件领域正在发生翻天覆地的变化. 这一变化主要以这个云 + 端大数据, 这些是随着目前最先进的一些技术的产生而产生的. 随着这些新的技术以 ...

  9. SpaceSyntax【空间句法】之DepthMapX学习：第三篇 软件介绍与一般分析流程图

    上篇讲啥来着?好像讲了数据的输入以及一些核心的概念.这篇讲软件长什么样,做那几种分析的步骤如何. 博客园/B站/知乎/CSDN @秋意正寒(我觉得这一篇肯定很多盗图的,那么我在版头加个本篇地址吧)ht ...

随机推荐

  1. C#实现自定义事件，用于监视变量变化

    很多时候我们需要程序具有一种功能,就是当满足某一条件时触发某个动作,使用C#的事件机制就可以达到这个目的下面的例子是一个很好的演示. 这段代码实现了对一个变量的监视,一旦变量发生改变,就触发动作 定义 ...

  2. ios中的事件处理、响应者链条以及第一响应者

    在ios中,事件UIEvent类来表示,当一个事件发生时,系统会搜集的相关事件信息,创建一个UIEvent对象,最后将该事件转发给应用程序对象(UIApplication).日常生活中,主要有三种类型 ...

  3. 20141124-HTML-JavaScrilpt

    JavaScript JavaScript(简称JS),他是一门HTML的脚本语言,用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. 他的用法及语法类似于Visual Stud ...

  4. 单一职责原则(SRP)

    一个类应仅有一个引起它变化的原因. 内聚性. 每个Responsibility都是变化的一个轴线.当需求变化时,该变化会反映为类的职责的变化 当一个类耦合了多个职责时,一个职责的变化会消弱或抑制其他职 ...

  5. android 数据库的增删改查的另一种方式

    老师笔记 # 3 Android下另外一种增删改查方式         1.创建一个帮助类的对象,调用getReadableDatabase方法,返回一个SqliteDatebase对象 2.使用Sq ...

  6. C++ 11 之学习总结

    感慨时间过的好快,C++ 11出来都5年了,现在才开始学习,但为时也不晚: 主要是网上及身边的朋友大肆宣扬C++ 11的某些优化,弄得别人心里痒痒的,所以就花了3天学习了点基本知识,相对于整个C++ ...

  7. FPGA笔记-读取.dat文件

    读取.dat图像文件 .dat文件是matlab生成的图像文件 initial begin // Initialize Inputs CLK = 0; RST = 1; IMAGE_DATA = 0; ...

  8. 三角函数计算，Cordic 算法入门

    [-] 三角函数计算Cordic 算法入门 从二分查找法说起 减少乘法运算 消除乘法运算 三角函数计算,Cordic 算法入门 三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来 ...

  9. Excel多条件筛选、公式填充

    接到一个任务,由于数据操作人员不会使用编辑公式进而无法进行相关筛选,所以要我帮忙.好久不碰Excel了,那就试试看吧. 需求是这样子的(这里做了最大化的简化):要求判断条件,男50岁以上,女40岁以上 ...

  10. jquery.tmpl.min.js--前端实现模版--数据绑定--详解

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...