学习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 ...
随机推荐
- Javascript常见操作
图片预加载 var image = new Image();image.onload = onLoad;image.onerror = onLoad;image.src =src; image.com ...
- Stimulsoft Reports筛选数据来绑定显示2个报表
今天用Stimulsoft Reports做报表的时候,遇到一个问题,需要一个报表中显示2个报表视图,我在百度和博客园中搜索了一下,发现这方面的资料很少,我自己最后把问题解决了之后,整理了一下给大家分 ...
- Programmer's Jokes
1. 一天, 下着小雨, 和同事们一起去上班,一位同事差点滑倒,另一位同事笑话说:如果人走路用爬的就不会摔倒了! 遂反问他:能用两行代码搞定的事情为什么要用4行呢? 2. 有趣的公式( Fr ...
- table-layout:fixed 属性的解说
table-layout:fixed 属性的解说如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用 ...
- HTML+CSS学习笔记（8）- CSS选择器
标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...
- UI1_Calayer
// // ViewController.m // UI1_Calayer // // Created by zhangxueming on 15/7/2. // Copyright (c) 2015 ...
- Poj OpenJudge 百练 1062 昂贵的聘礼
1.Link: http://poj.org/problem?id=1062 http://bailian.openjudge.cn/practice/1062/ 2.Content: 昂贵的聘礼 T ...
- 运行maven报错:经过检查是因为maven不兼容jdk1.6,重新安装1.7解决
cmd mvn -v报错: Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apach ...
- [转]高并发访问下避免对象缓存失效引发Dogpile效应
避免Redis/Memcached缓存失效引发Dogpile效应 Redis/Memcached高并发访问下的缓存失效时可能产生Dogpile效应(Cache Stampede效应). 推荐阅读:高并 ...
- ADO.NET笔记——使用Command执行增删改操作，通过判断ExecuteNonQuery()返回值检查是否操作成功
相关知识: ExecuteNonQuery()方法:执行CommandText属性所制定的操作,返回受影响的记录条数.该方法一般用来执行SQL中的UPDATE.INSERT和DELETE等操作 对于U ...