Knockoutjs 实践入门 (3) 绑定数组

<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>

时间: 2024-10-08 15:11:35

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

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

Knockoutjs 绑定事件 Knockoutjs 不仅支持UI 元素的属性绑定到model的属性,还支持UI 元素的事件绑定model的事件. 需求: l  click me button 每单击一次,计数器累加一次,并且把计数器次数显示到div中 l  click me button 最大可单击3次,3次过后click me button 不能使用;单击次数达到3次时,显示提示信息,并且显示reset button l  reset button 单击后click me button 计数

[转]Knockoutjs快速入门

本文转自:http://www.cnblogs.com/yinzixin/archive/2012/12/21/2827356.html Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用

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

在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任何程序中.只要你的程序中需要这项功能!但是对于一些刚开始学习某种框架的菜鸟而言,这似乎就不是那么简单了.如果在学习开源框架API的同时,能有一两个案例小程序配着其API去看,那应该就是事半功倍了. 本文是在自己学习源码和网上查找资料的基础上完成的,将详细叙述在java工程中如何巧妙的融入Quartz框架,小案

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

趁着上一篇文章的余温,我们继续研究一下SSIS中多个包如何调度,难道需要一个包一个包的配置调度程序吗?显然不是的,接下来我们就说一说在SSIS应用中如何批量的调度所有的作业,本文只讲述一个基本的逻辑过程以及简单测试. 1:发布SSIS包 调度包,就需要我们首先将SSIS包发布到SQLServer的集成服务下面 下面我们就着手把SSIS实践入门1中创建的两个包sqltosql.dtsx和oratosql.dtsx发布到SQLServer服务中的Integration Services下面 1.1:

C语言入门基础之数组——数学和编程的完美结合(图)

C语言入门基础之数组--数学和编程的完美结合(图)姐姐又来更新了,刚刚过完周末,是不是玩的很开心啊,放松后我们来学习新知识吧!现在我们要讲数组啦,编程往往和数学紧密联系着,想必在我们高中有学习过集合吧.那么在编程中我们怎么表示集合呢?刚学编程的小可爱可能学到变量时候发现,如果我需要用很多变量存储同意作用的值,需要大量的变量.现在让小姐姐给你介绍下二维数组吧,小可爱可要认真学了哦!记得给小姐姐点赞,?( ′???` )比心大家都玩抖音吧,我们每个人都有一个抖音号,我们还会关注一些小姐姐的抖音号,那

【无线安全实践入门】网络扫描和ARP欺骗

文中可能存在错误操作或错误理解,望大家不吝指正. 同时也希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的部分笔记. 本文中的工具可能已经过时,或使用方法已经改变了,感兴趣可以深入查阅资料 (但是我还是列出以前的使用方法供大家借鉴). ps.若对无线攻击手段与WiFi破解感兴趣可以参考以下两篇文章 [无线安全实践入门]基础攻击手段与常用工具简介 [无线安全实践入门]破解WiFi密码的多个方法 ps.本

Knockoutjs 使用实践入门 (1)

1  是什么? 使用MVVM模式的简单,动态的Javascript UI.           2   优点  声明式绑定  UI 自动更新 依赖追踪  模板化          3 如何使用   <!--(1)引入knockout js 库--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.js"  type="text/javascript"> </

Knockoutjs快速入门(经典)

Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定. 1.基本绑定和依赖跟踪 首先需要定义一个ViewModel: 复制代码 代码如下: <script type=

knockoutjs data-bind 声明式绑定整理

一.Visible绑定 1.功能 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 2.示例 <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> <script type="text/javascript"