<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. Ubuntu 试用Android L版本

    Android L是最近google一个大更新的版本,目前google开发了android L的开发者预览版本,对于一个android 开发者来说很定是要下载下来体验一把,顺便也要了解一下Androi ...

  2. [Note] changing building platform from vs 2013 to vs community 2015

    The error turned out as "undefined linkage"(The same as you haven't use some function that ...

  3. Web页面报错: Eval()、XPath() 和 Bind() 这类数据绑定方法只能在上下文中使用

    可以使用string.formt来避免出错. 如: <%# Convert.ToInt32(DataBinder.Eval(Container.DataItem, "Status&qu ...

  4. select制作分层级目录,让select显示和可下拉选择的"不一样"

    今天遇到一个特殊的select问题,需求是这样的:每次点击这个select时,根据选择的option的值做出相应的处理并返回新的select,option内容.所以大致思路是给这个select绑定ch ...

  5. c# 调用 matlab

    如果本机没有安装Matlab 需要安装一个叫 MCRInstaller 的东西  运行环境 如果安装后 需要把D:\MATLAB\R2013a\bin\win64; 写入环境变量 (路径根据实际情况改 ...

  6. Kiwi iOS驱动测试开发

    Kiwi是iOS开发一个行为驱动开发库.目标是提供一个BDD库,精美的简单安装和使用. 安装 使用CocoaPods安装: pod 'Kiwi'如果使用Xcode5则使用: pod 'Kiwi/XCT ...

  7. Android数据库安全解决方案,使用SQLCipher进行加解密

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/11952409 我们都知道,Android系统内置了SQLite数据库,并且提供了一 ...

  8. IIS处理并发请求时出现的问题及解决

    一个ASP.NET项目在部署到生产环境时,当用户并发量达到200左右时,IIS出现了明显的请求排队现象,发送的请求都进入等待,无法及时响 应,系统基本处于不可用状态.因经验不足,花了很多时间精力解决这 ...

  9. kinect driver install (ubuntu 14.04 & ros-indigo)

    kinect driver 安装过程: 1.在ubuntu上安装kinect驱动比较繁琐,需要安装以下3个驱动包, OpenNI-Bin-Dev-Linux-x64-v1.5.7.10 NITE-Bi ...

  10. mysql数据表操作&库操作

    首先登陆mysql:mysql -uroot -proot -P3306 -h127.0.0.1 查看所有的库:show databases; 进入一个库:use database; 显示所在的库:s ...