关于学习Knockoutjs--入门(二)
这两天终于闲一丢丢了,可以有多点时间学习一下拉。接下来要写到的还是Knockoutjs。
Knockout是建立在以下3个核心功能之上的:
1、 属性监控与依赖跟踪
2、 声明式绑定
3、 模版机制
Model-View-View Model (MVVM)是一种创建用户界面的设计模式。通过它只要将UI界面分成以下3个部分,就可以使复杂的界面变得简单(这个上一篇画过图,现在细讲一下):
1、Model,用于存储应用程序数据,这些数据表示业务领域的对象和数据操作,并且独立于任何界面。
2、View Model,纯粹用于描述数据内容和页面操作的数据模型。
注意:这不是UI本身,它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。当使用KO时,View Model(数据模型)是纯粹的不包含HTML知识的JavaScript对象,保持View Model(数据模型)抽象在使用时可以保持简单,因此可以更简单的操作管理更复杂的行为。
3、View,代表View Model状态的一个可见、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令(例如,当用户点击按钮)以及在View Model发生变化时保持自动更新。
使用KO时,View层主要就是简单的将HTML文档声明式的绑定到View Model,将它们关联起来。另外,也可以利用模版从View Model获取数据动态生成HTML。
总结ko几种类型绑定:
html绑定
html绑定到DOM元素上,使得该元素显示的HTML值为绑定的参数。
Visible绑定
Visible绑定通过绑定一个值来确定DOM元素显示或隐藏
text绑定
Visible绑定通过绑定一个值来确定DOM元素显示或隐藏
css类名绑定
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。
style属性绑定
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。
attr属性绑定
这个绑定可以用于给DOM元素添加自定义属性,或绑定到已有的属性,attr 绑定提供了一种方式可以设置DOM元素的任何属性值。可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。
foreath绑定
使用此功能可以方便循环遍历输出某个数组、集合中的内容。
if绑定
(1)使用if binding可以控制某个组件动态显示,类似我们之前接触到的visible属性,不过此属性绑定过以后就不能更改,而if binding可以根据相应的条件控制组件是否显示
(2)、也可以使用if来判断某个元素是否为null,如果为null则不会显示
with绑定
可以使用with binding来重新定义一个上下文绑定
click绑定
lick绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。
event属性绑定
event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。
value属性绑定
value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。
当用户编辑表单控件的时候, view model对应的属性值会自动更新。同样,当更新view model属性的时候,相对应的元素值在页面上也会自动更新。
注:如果在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定。
submit属性绑定
submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。
当你使用submit绑定的时候, Knockout会阻止form表单默认的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个,使用submit绑定就是为了处理view model的自定义函
数的,而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作,你可以在你的submit句柄里返回true。
好了学习的今天先写到这里,这段时间呢,事情特别多,脑子老是记不住,后来我发现了一个解决的办法,就是要做的东西,都整理起来,记好,然后清空大脑,再按照整理出来的一样一样做,效率也提高了,不过有的时候拖延症总犯,这个得
赶紧克服!
关于学习Knockoutjs--入门(二)的更多相关文章
- python学习02python入门二
学前须知:1.本文档有关内容均建立在python3.x版本上,python2.x已经成为历史,如有需要,文内会特别说明. 2.本文使用的编辑器多为架构在Windows上的pycharm,如需了解Lin ...
- C#线程学习笔记九:async & await入门二
一.异步方法返回类型 只能返回3种类型(void.Task和Task<T>). 1.1.void返回类型:调用方法执行异步方法,但又不需要做进一步的交互. class Program { ...
- Java超简明入门学习笔记(二)
Java编程思想第4版学习笔记(二) 第三章 操作符 & 第四章 控制执行流程(流程控制语句) 第三章和第四章的内容主要是讲操作符和流程控制语句,Java的大多数操作符和流程控 ...
- 【原创】NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示
前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...
- PHP学习笔记 - 入门篇(5)
PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...
- PHP学习笔记--入门篇
PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...
- netty深入学习之一: 入门篇
netty深入学习之一: 入门篇 本文代码下载: http://download.csdn.net/detail/cheungmine/8497549 1)Netty是什么 Netty是Java NI ...
- LESS学习笔记 —— 入门
今天在网上完成了LESS的基础学习,下面是我的学习笔记.总共有三个文件:index.html.main.less.mian.css,其中 mian.css 是 main.less 经过Koala编译之 ...
- IM开发者的零基础通信技术入门(二):通信交换技术的百年发展史(下)
1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...
- 脑残式网络编程入门(二):我们在读写Socket时,究竟在读写什么?
1.引言 本文接上篇<脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手>,继续脑残式的网络编程知识学习 ^_^. 套接字socket是大多数程序员都非常熟悉的概念,它是计算机 ...
随机推荐
- hdu 1312
原题链接 题意:“@”为起点,“.”为路,求可以走的格子有多少个(包括起点) 水题 bfs搜一发 思路:只有可以走的节点才能进入队列,所以每次出队列时ans+1就可以了(没有退出条件,所有可进入的节点 ...
- scala-协变、逆变、上界、下界
scala-协变.逆变.上界.下界 当我们定义一个协变类型List[A+]时,List[Child]可以是List[Parent]的子类型. 当我们定义一个逆变类型List[-A]时,List[Chi ...
- Linux下配置Lamp
linux下配置lamp步骤: 一.快速安装Apache+PHP5+MySql 先更新: # yum update 然后安装LAMP环境:(163的yum源上只有php5.1.6 mysql 5.0. ...
- AspCms标签手册
网站通用标签 基本标签 {aspcms:sitepath} 网站终极目录(可放在二级目录,其它语言则在三级目录) {aspcms:languagepath} 语言目录 {aspcms:siteurl} ...
- spring security 匿名登录
匿名登录,即用户尚未登录系统,系统会为所有未登录的用户分配一个匿名用户,这个用户也拥有自己的权限,不过他是不能访问任何被保护资源的. 设置一个匿名用户的好处是,我们在进行权限判断时,可以保证Secur ...
- JSP页面以及简单的指令
JSP(Java Server Pages)是指: 在HTML中嵌入Java脚本语言 由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本语言命令 然后将生成的整个页面信息返回给客户端 页 ...
- URAL 2080 莫队
题意 有m种卡 给出卡的使用序列 要求每次从卡堆的顶部抽一张出来 刚好符合序列 输出初始 卡堆的排序 再输出每次抽出卡用后 卡插回卡堆的时候 这张卡上面有几张卡 初始排序很容易就可以搞出来 但是需要注 ...
- 使用Visual Studio下自带的SQL Server Express
软件环境:Windows7(x64) + Visual Studio 2010 + SQL Server Express 2008 1.配置数据库 装VS2010不小心把自带的SQL Server 2 ...
- Trace文件过量生成问题解决
查看用户临时文件(trace文件)所在位置 如果是trace文件(.trc)大导致的 SQL>show parameters user_dump_dest 在路径下查看 alert_log 文件 ...
- openfire二次开发eclipse环境搭建
转自:http://blog.csdn.net/daigua245/article/details/7918243 1.将openfire源码项目解压到(如果是从SVN CO下来的则不用)eclips ...