<form id="form1" runat="server">
        <div>
            <!--text value绑定model:itemToAdd,valueUpdate:更新数据绑定时机:按键时-->
            <!---如果不指定valueUpdate,使用默认更新数据绑定,经试验并不是onchange-->
            <input type="text"  data-bind='value:itemToAdd, valueUpdate: "afterkeydown"'/>
             <!--button enable:绑定itemToAdd,click事件绑定model.addItem方法-->
            <input type="button" value="Add" data-bind='enable:itemToAdd().length>0,click:addItem'  />

</div>
        <div>
            <!--select.options  绑定model.dataSource -->
            <select  multiple="multiple" style="width:200px" data-bind="options:dataSource"></select>
        </div>
    </form>
     <script type="text/javascript">
         var model = function (items) {
             //绑定数据源
             this.dataSource = ko.observableArray(items);
             //绑定observable:最终返回输入值,itemToAdd就是绑定输入值
             this.itemToAdd=ko.observable("");
             this.addItem = function () {
                 if (this.itemToAdd() != "") {
                     alert(this.itemToAdd());
                     //插入获取的输入值
                     this.dataSource.push(this.itemToAdd());
                     //输入值清空
                     this.itemToAdd("");
                 }
                 
                 //this 设置为model
             }.bind(this);
         };

//初始化model
         ko.applyBindings(new model(["aaa","bbb","ccc"]));
    </script>

Knockoutjs 实践入门 (3) 绑定数组的更多相关文章

  1. Knockoutjs 实践入门 (2) 绑定事件

    Knockoutjs 绑定事件 Knockoutjs 不仅支持UI 元素的属性绑定到model的属性,还支持UI 元素的事件绑定model的事件. 需求: l  click me button 每单击 ...

  2. Knockoutjs 实践入门 (1) 属性绑定

    1  是什么? 使用MVVM模式的简单,动态的Javascript UI.           2   优点  声明式绑定  UI 自动更新 依赖追踪  模板化          3 如何使用   & ...

  3. WCF宿主实践入门

    本篇属于WCF实践入门,由于博主本人水平有限,没有理论上的介绍,仅仅从其几种不同的宿主方式分别介绍WCF的使用. WCF有多种宿主方式:1.自托管宿主,2.windows service宿主,3.II ...

  4. 【无线安全实践入门】破解WiFi密码的多个方法

    本文希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. 文中可能存在错误操作或错误理解,望大家不吝指正. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的 ...

  5. Quartz应用实践入门案例二(基于java工程)

    在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...

  6. Quartz应用实践入门案例一(基于Web环境)

    Quartz是一个完全由java编写的开源作业调度框架,正是因为这个框架整合了许多额外的功能,所以在使用上就显得相当容易.只是需要简单的配置一下就能轻松的使用任务调度了.在Quartz中,真正执行的j ...

  7. MongoDB 极简实践入门

    原作者StevenSLXie; 原链接(https://github.com/StevenSLXie/Tutorials-for-Web-Developers/blob/master/MongoDB% ...

  8. SSIS实践入门3:把SSIS程序包从A电脑到B电脑的转移

    接触SSIS已经有几天了,之前一直是在A电脑做一些demo和修改一些之前的SSIS程序.这次在包中拖入了一个脚本任务,但是在A电脑打开编辑一直打不开,如下图所示 在B电脑就可以打开SSIS脚本编辑器 ...

  9. SSIS实践入门2:批量包的调度和SQLServer代理作业配置

    趁着上一篇文章的余温,我们继续研究一下SSIS中多个包如何调度,难道需要一个包一个包的配置调度程序吗?显然不是的,接下来我们就说一说在SSIS应用中如何批量的调度所有的作业,本文只讲述一个基本的逻辑过 ...

随机推荐

  1. Windows XP SP3下成功编译CUint2.1-3

    软件环境:Visual C++ 6.0 操作系统:Windows XP SP3 从sourceforge.net下载CUint-2.1-3.tar.bz解压出目录CUnit-2.1-3 从CUint打 ...

  2. MyEclipse +Flex 整合

         最近想利用red5开发一个流媒体的程序,在网上找了半天没有一个可用的代码,要么是下载需要多少币,要么是没有.纠结了半天,最后决定自检看着文字版本的教程,自己编写一个.         看着一 ...

  3. 用keras的cnn做人脸分类

    keras介绍 Keras是一个简约,高度模块化的神经网络库.采用Python / Theano开发. 使用Keras如果你需要一个深度学习库: 可以很容易和快速实现原型(通过总模块化,极简主义,和可 ...

  4. 读 《.Net 之美》解析.Net Remoting (应用程序域)-- Part.1

    读 <.Net 之美>解析.Net Remoting (应用程序域)-Part1 理解 .Net Remoting 前言: 看张子阳老师的文章,总是给自己很大的信心,这个专题基本上以张老师 ...

  5. 调整Win7中TCP/IP半开连接数限制

    调整Win7中TCP/IP半开连接数限制      相信大家都有过这样的经历,普通的ADSL宽带下,打开下载工具下载资源时,再想浏览网页就会变得非常困难了,Windows7中也未能幸免.   究其原因 ...

  6. css总集

    1 font-style normal 正常显示 italic 斜体 百分比 字体大小 font-size 像素 字体大小 font-family 字体名称 设置字体名称 letter-spacing ...

  7. vue 2 滚动条加载更多数据实现

    解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...

  8. php生成网页桌面快捷方式

    本文将介绍使用PHP生成网页桌面快捷方式的代码,并添加图标及解决不同浏览器保存出现的乱码问题. 我们访问网站时,如果网站的内容很有吸引,一般我们都会使用浏览器的收藏夹功能,收藏此网站. 在浏览器收藏的 ...

  9. php设计模式--单例模式

    单例模式(Singleton Pattern 单件模式或单元素模式) 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式是一种常见的设计模式,在计算机系统中,线程池.缓 ...

  10. 如果因特网中的所有链路都提供可靠的交付服务,TCP可靠传输服务是多余的吗?

    IP协议因为是无连接的, 所以其传输是不可靠的.虽然链路保证了数据包在端到端的传输中不发生差错,但是它不能保证IP数据包是按照正确的书需到达最终的目的地.IP数据包可以使用不同的路由通过网络,到达接收 ...