学习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. echo，printr,print_r之间的区别

    echo 返回值是void,可以一次输出多个值,多个值之间用逗号分隔.echo是语言结构(language construct)也就是关键字,而并不是真正的函数,因此不能作为表达式的一部分使用.使用的 ...

  2. Jquery 格式化时间

    我们常常会通过datetime得到时间,但是网页前台往往会显示不同的时间 如:2013-12-15 2013年12月23日 2013 12 15 等多种显示效果,这就需要我们把时间格式化一下. 下面是 ...

  3. 坑到了，EF执行带事物的存储过程

    用EF开发项目,今天调用 带事物 存储过程,始终报错,"EXECUTE 后的事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配.上一计数 = 1,当前计数 = 0.\r\nEXEC ...

  4. OpenFiler安装与基本配置

    一.            安装篇 1.      插入安装盘 2.      选择键盘输出 3.      对硬盘进行分区 4.      删除所有数据并重新分区 5.      配置IP地址等信息 ...

  5. Hadoop集群“WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable”解决办法

    Hadoop集群部署完成后,经常会提示 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platfo ...

  6. jenkins（一）集成环境搭建示例

    一.环境准备 1.安装java环境 测试自己机器是否已安装,在dos上运行java-version ,出现如下类似结果表示安装完成 2.安装Git/svn git具体配置见我的博客 “GitHub使用 ...

  7. VxWorks 6.9 内核编程指导之读书笔记 -- 多任务

    概述 VxWork系统任务 任务调度 任务创建和管理 任务的错误状态 任务异常处理 共享代码和重入 概述 现代实时操作系统是基于多任务和任务间通信的概念的.多任务环境运行一个实时进程RTP可以被作为一 ...

  8. ZLComboBox自定义控件开发详解

    [引言]距离上一回写博客已经有一些时日了,之前的爱莲iLinkIT系列主要是讲解了如何用NodeJS来实现一个简单的“文件传送”软件,属于JavaScript中在服务器端的应用. 今天,我们就回归到J ...

  9. Typical sentences in SCI papers

       Beginning  1. In this paper, we focus on the need for   2. This paper proceeds as follow.   3. Th ...

  10. 求单链表倒数第m个结点

    问题:求单链表倒数第m个结点,要求不准求链表的长度,也不许对链表进行逆转 解:设置两个指针p和q,p.q指向第一个结点.让p先移动到链表的第m个结点,然后p和q同时向后移动,直到p首先到达尾结点.此时 ...