<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. FormatMessage与GetLastError配合使用,排查windows api调用过程中的错误

    前一段时间在学习windows api调用过程中,遇到过一些调用错误或者程序没能显示预期的结果,或者直接出现vc运行时错误. 这对新手来说是司空见惯的事,因为不太熟悉难免会出错,出错的信息如果能显示很 ...

  2. new(C# 参考)

    在 C# 中,new 关键字可用作运算符.修饰符或约束. new 运算符 用于创建对象和调用构造函数. new 修饰符 用于隐藏基类中被继承的成员. new 约束 用于在泛型声明中约束可能用作类型参数 ...

  3. mysql 用命令操作

    本篇文章来源于http://c.biancheng.net/cpp/html/1441.html mysql:连接数据库 mysql命令用户连接数据库. mysql命令格式: mysql -h主机地址 ...

  4. 通过viewmodel找到view

    如何通过viewmodel找到view? 之前的做法是,在view加载时(Loaded),将view保存到viewmodel中,后来想想Caliburn-Micro,自带方法可以通过viewmodel ...

  5. win10 virtualbox5, ubuntu16.04 xshell5配合使用

    这个搭配很好用,各软件的安装很容易,ubuntu安装进virtualbox后安装增强功能,然后将网络连接方式改为桥接,直接改为桥接就可以了,其他的不用变,这个比以前的版本好用多了.这个桥接解决了宿主机 ...

  6. [PHP] Xhprof 非侵入式使用指南

    一般使用 Xhprof ,按文档操作可以快速上手,文件头开启 Xhprof,应用结束处得到访问的url查看. 这种使用方式可以快速看到效果,同时也有一些不好的地方: 一是不利于重复利用写好的示例代码: ...

  7. SQL联合更新(只要有关联字段就能执行更新!)

    update t1 set KCLX=t2.KCLX,KSFS=t2.KSFS from JX_PlannedCourse t1 inner join JX_Course t2 on t1.KCDM= ...

  8. ASP.NET页面之间传递值的几种方式

    目录 QueryString Session Cookie Application 一.QueryString QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中. ...

  9. 【洛谷P2889】Milking Time

    很容易想到以结束时间加上R从小到大排序 之后怎样呢? 我们按层考虑,f[i]表示前i个时间段嫩得到的最大价值 每次枚举其之前的状态,如果其ed<当前i的st,那么取max即可 #include& ...

  10. javaWeb开发小工具--MyCommonUtils

    MyCommonUtils 参考一些资料,写了这个工具类.在这个工具类中,主要实现了2个方法: 1.生成随机的序列号 uuid(): 2.将Map中的数据封装到javaBean对象中toBean(Ma ...