学习KnockOut第三篇之List
学习KnockOut第三篇之List
欲看此篇---------------------------------------------可先看上篇。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title> mutuDu's List</ title>
</head >
<body >
<form>
New Friend:
<input />
<button> Add</ button>
</form>
<p> My Friend:</ p>
<select></ select>
<div>
<button> Remove</ button>
<button> Sort</ button>
</div>
</body >
</html>
<script src="knockout-2.2.0.js"></ script>
<script type="text/javascript"> </script>
一个大概的样子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title> mutuDu's List</ title>
</head >
<body >
<form>
New Friend:
<input data-bind="value:itemToAdd" />
<button> Add</ button>
</form>
<p> My Friend:</ p>
<select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
<div>
<button> Remove</ button>
<button> Sort</ button>
</div>
</body >
</html>
<script src="knockout-2.2.0.js"></ script>
<script type="text/javascript">
var ListViewModel = function (items) {
this.itemToAdd = ko.observable( "");
this.selectedItem = ko.observableArray([ "Lina"]);//绑定数组里的元素不能忘了中括号。
this.items = ko.observableArray(items);
};
ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
</script>
下拉框里没值看着真心难受。options绑定。
- ListViewModel .items.push(new value);在数组末尾添加一个新项。
- ListViewModel .items.sort(new value); 看到上一个，也应该知道这个是给数组排序。
- ListViewModel .items.reverse(new value);那么，这个是翻转数组还是翻转数组？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title> mutuDu's List</ title>
</head >
<body >
<form data-bind="submit:addItem"> <!--这里写submit绑定，和下面的submit按钮相对应，执行addItem方法。-->
New Friend:
<input data-bind="value:itemToAdd" />
<button type="submit"> Add</ button><!--type的类型的是submit-->
</form>
<p> My Friend:</ p>
<select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
<div>
<button> Remove</ button>
<button> Sort</ button>
</div>
</body >
</html>
<script src="knockout-2.2.0.js"></ script>
<script type="text/javascript">
var ListViewModel = function (items) {
this.itemToAdd = ko.observable( "");
this.selectedItem = ko.observableArray([ "Lina"]);
this.items = ko.observableArray(items);
//这里就是点Add时执行的方法。
this.addItem = function() {
this.items.push( this.itemToAdd());//push或者sort应该是蛮好理解的吧。
this.itemToAdd( "");
};
};
ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
</script>
新朋友你过来吧。submit绑定。
- ListViewModel .items.remove(someItem);删除所有等于someItem的元素并将被删除元素作为一个数组返回。
- ListViewModel .items.removeAll(['someItem',5926,'undefined']);删除等于'someItem',5926,或者undefined的元素并将删除之元素作为数组返回。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title> mutuDu's List</ title>
</head >
<body >
<form data-bind="submit:addItem">
New Friend:
<input data-bind="value:itemToAdd" />
<button type="submit"> Add</ button>
</form>
<p> My Friend:</ p>
<select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
<div>
<button data-bind ="click:removeSelected">Remove</ button><!--click绑定,执行下面的删除函数-->
<button data-bind="click:sortItems"> Sort</ button><!--click绑定，执行下面的排序函数-->
</div>
</body >
</html>
<script src="knockout-2.2.0.js"></ script>
<script type="text/javascript">
var ListViewModel = function (items) {
this.itemToAdd = ko.observable( "");
this.selectedItem = ko.observableArray([ "Lina"]);
this.items = ko.observableArray(items);
this.addItem = function() {
this.items.push( this.itemToAdd());
this.itemToAdd( "");
};
//这里是点击删除时的方法。
this.removeSelected = function() {
this.items.removeAll( this.selectedItem());
this.selectedItem([]); //注意括号是不能掉了的。
};
//这里是写排序的方法
this.sortItems = function() {
this.items.sort();//上面有说到这个方法。
};
};
ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
</script>
删除和排序，只是两个函数而已。
楼主，这个sort排序是按什么规律排？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title> mutuDu's List</ title>
</head >
<body >
<form data-bind="submit:addItem">
New Friend:
<input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" /><!--当输入字符时就自动更新ViewModel-->
<button type="submit" data-bind="enable:itemToAdd().length>0">Add </button> <!--加了enable绑定-->
</form>
<p> My Friend:</ p>
<select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
<div>
<button data-bind="click:removeSelected,enable:selectedItem().length>0">Remove</ button><!--加了enable绑定-->
<button data-bind="click:sortItems,enable:items().length>1">Sort </button> <!--加了enable绑定-->
</div>
</body >
</html>
<script src="knockout-2.2.0.js"></ script>
<script type="text/javascript">
var ListViewModel = function (items) {
this.itemToAdd = ko.observable( "");
this.selectedItem = ko.observableArray([ "Lina"]);
this.items = ko.observableArray(items);
this.addItem = function() {
this.items.push( this.itemToAdd());
this.itemToAdd( "");
};
this.removeSelected = function() {
this.items.removeAll( this.selectedItem());
this.selectedItem([]);
};
this.sortItems = function() {
this.items.sort();
};
};
ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
</script>
体验不够好。enable绑定和value的第二个参数。
学习KnockOut第三篇之List的更多相关文章
- RabbitMQ学习总结 第三篇：工作队列Work Queue
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- 我们一起学习WCF 第三篇头消息验证用户身份
前言:今天我主要写的是关于头消息的一个用处验证用户信息 下面我画一个图,可以先看图 第一步:我们先开始做用户请求代码 首先:创建一个可执行的上下文对象块并定义内部传输的通道 using (Operat ...
- Egret入门学习日记 --- 第三篇 （书中 3.4 内容）
第三篇 (书中 3.4 内容) 今天还是要把昨天项目运行后,EXML文件里的界面没有出现的问题解决了才行. 去了群里,没人回.去了官网看文档,看不懂. 不过倒是看到了一个好东西: 还挺便宜啊,一个月要 ...
- JavaWeb学习总结第三篇--走进JSP页面元素
JavaWeb学习(三)—走进JSP页面元素 JSP:Java Server Pages,译为Java服务器页面.其脚本采用Java语言,继承了Java所有优点.JSP元素可以分为指令元素.脚本元素和 ...
- ASP.NET Core 学习笔记 第三篇 依赖注入框架的使用
前言 首先感谢小可爱门的支持,写了这个系列的第二篇后,得到了好多人的鼓励,也更加坚定我把这个系列写完的决心,也能更好的督促自己的学习,分享自己的学习成果.还记得上篇文章中最后提及到,假如服务越来越多怎 ...
- R学习笔记 第三篇：数据框
数据框(data.frame)用于存储二维表(即关系表)的数据,每一列存储的数据类型必须相同,不同的数据列的数据类型可以相同,也可以不同,但是,每列的长度必须相同.数据框的每列可以有唯一的命名,在已创 ...
- Asp.net core Identity + identity server + angular 学习笔记 (第三篇)
register -> login 讲了 我们来讲讲 forgot password -> reset password 和 change password 吧 先来 forgot pa ...
- 编程学习笔记(第三篇)面向对象技术高级课程：绪论-软件开发方法的演化与最新趋势（3）软件开发的现状、UML扩展
一.软件开发的现状 软件领域正在发生一个巨变,特别是近几年来,软件领域正在发生翻天覆地的变化. 这一变化主要以这个云 + 端大数据, 这些是随着目前最先进的一些技术的产生而产生的. 随着这些新的技术以 ...
- SpaceSyntax【空间句法】之DepthMapX学习：第三篇 软件介绍与一般分析流程图
上篇讲啥来着?好像讲了数据的输入以及一些核心的概念.这篇讲软件长什么样,做那几种分析的步骤如何. 博客园/B站/知乎/CSDN @秋意正寒(我觉得这一篇肯定很多盗图的,那么我在版头加个本篇地址吧)ht ...
随机推荐
- Nginx服务器不支持PATH_INFO的问题及解决办法
最近在写一个小程序,然后里面自己写了个URL的处理器,比如说访问index.php/article 那么就会自动加载进来article页面,访问index.php/home就会自动加载home页面. ...
- AngularJS简单用法
一.数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM中元素变化,另一 ...
- AngularJS学习小结
在刚学习AngularJS的时候觉得好像挺简单的,看见老师每次用很少的代码就做出用源生代码或者JQuery要用多行代码才做出的效果的时候觉得好像思路很简单,也很好写就写出来了,但是等到我们自己做的时候 ...
- WebSocket在ASP.NET MVC4中的简单实现 (该文章转自网络，经尝试并未实现，请大神指点。)
WebSocket 规范的目标是在浏览器中实现和服务器端双向通信.双向通信可以拓展浏览器上的应用类型,例如实时的数据推送.游戏.聊天等.有了WebSocket,我们就可以通过持久的浏览器和服务器的连接 ...
- EL表达式获取数据
EL 全名为Expression Language. EL主要作用 获取数据: •EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.(某个web域 ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- Application 统计在线人数
MVC 统计在线人数: protected void Application_Start() { Application[; AreaRegistration.RegisterAllAreas(); ...
- 转: 理解Python的With语句
Python’s with statement provides a very convenient way of dealing with the situation where you have ...
- (转)文件系统缓存dirty_ratio与dirty_background_ratio两个参数区别
这两天在调优数据库性能的过程中需要降低操作系统文件Cache对数据库性能的影响,故调研了一些降低文件系统缓存大小的方法,其中一种是通过修改/proc/sys/vm/dirty_background_r ...
- Linux 伙伴算法简介
本文将简要介绍一下Linux内核中的伙伴分配算法. Technorati 标签: 伙伴算法 算法作用 它要解决的问题是频繁地请求和释放不同大小的一组连续页框,必然导致在已分配 ...