<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. ABAP 字符串操作

    1).SHIFT:截断字符串 SHIFT {c} [BY {n} PLACES] [{mode}].: 作用:去掉字符串的前n个位置的字符,如果n未指定,默认为1,如果指定的n小于等于0,则字符串不变 ...

  2. js将json字符串转化成json对象的方法

    js将json字符串转化成json对象的方法: JSON.parse(jsonObject)

  3. Ubuntu 安装tftp服务器

    Ubuntu下搭建tftp服务器最简单方法   转 linux公社       今天开始调试ARM的板子,要通过tftp下载到板子上,所以又要配置tftp服务器,真的烦死了... (本人酷爱装系统,所 ...

  4. [linux] 默认权限修改(umask)

    1 文件默认权限 对于目录,默认权限=777-umask 对于文件,默认权限=666-umask(文件默认无执行权限) 默认权限修改: vim /etc/bashrc 71行是普通用户的更改,73是超 ...

  5. hbuilder中如何使用egit上传项目

    刚开始使用时,我也是遵照网上的教程来的,其实就那一篇教程,到处被转载,怎么搜都是那一个,实际操作发现有点小不同,所以实际截图给大家一个参考. 1.首先肯定是进入hbuilder下载egit插件啦.(工 ...

  6. NLS_LANG

    NLS_LANG是一个环境变量,用于定义语言,地域以及字符集属性.对于非英语的字符集,NLS_LANG的设置就非常重要. NLS:‘National Language Support (NLS)’ 当 ...

  7. [16]APUE:套接字

    [a] socket / socketpair #include <sys/socket.h> int socket(int domain, int type, int protocol) ...

  8. win7环境下安装运行gotour【转载整理】

    转载请注明出处:http://www.cnblogs.com/Vulpers/p/5562586.html 最近尝试学习golang,在某个网站(真忘了)上发现gotour是一款灰常叼的教程& ...

  9. jQuery与其他JS库共存

    * 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$&qu ...

  10. android 模拟器上网问题

    android 模拟器上网问题 1.配置Adroid环境变量(Win7为例) ,启动模拟器 第一步:桌面右键——>我的电脑——>高级系统设置    第二步:高级——>环境变量——&g ...