ko 简单例子
Knockout是在下面三个核心功能是建立起来的:
监控属性(Observables)和依赖跟踪(Dependency tracking)
声明式绑定(Declarative bindings)
模板(Templating)
工作中,最重要的是建模,模型建好了,能减少很多的工作和代码,只要着重于维护好自己的模板。
用好它的依赖关系可以使连动很省事,不用操作dom元素,全部都是dom bind ,使页面和数据相分离,结构更清晰,更易于维护
简单例子:
html:
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
javascript:
var viewModel = {
firstName: ko.observable("Planet"),
lastName: ko.observable("Earth")
};
viewModel.fullName = ko.dependentObservable(function () {
// Knockout tracks dependencies automatically.
//It knows that fullName depends on firstName and lastName,
//because these get called when evaluating fullName.
return viewModel.firstName() + " " + viewModel.lastName();
});
ko.applyBindings(viewModel); // This makes Knockout get to work
eg2:foreach循环输出
<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: product.name"></td>
<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
<td data-bind="text: subTotal"></td>
</tr>
</tbody>
</table>
当我改变模型里边的 firstname时,不仅模型里边的值改变了,页面上相应的值也会变。
现在项目中用到的:
1.ko的依赖属性
2.表单验证
3.模板
等等
也可以添加自定义的绑定。
ko 简单例子的更多相关文章
- Hibernate4.2.4入门(一)——环境搭建和简单例子
一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...
- AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答
一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...
- spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- mysql定时任务简单例子
mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9 如果要每30秒执行以下语句: [sql] update userinfo set endtime = now() WHE ...
- java socket编程开发简单例子 与 nio非阻塞通道
基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...
- 一个简单例子:贫血模型or领域模型
转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...
- [转] 3个学习Socket编程的简单例子:TCP Server/Client, Select
以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...
- jsonp的简单例子
jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Java-马士兵设计模式学习笔记-观察者模式-AWT简单例子
1.AWT简单例子 TestFrame.java import java.awt.Button; import java.awt.Frame; import java.awt.event.Action ...
随机推荐
- 网易云音乐PC端刷曲快捷键
文章首发于szhshp的第三边境研究所(szhshp.org), 转载请注明 网易云音乐PC端刷曲快捷键 好吧我承认我特别懒 云音乐其实做的还不错,FM推荐的算法明显比虾米好. 虾米可以听的曲子都 ...
- 命令行导入mysql数据
找到mysql安装目录(bin) 进入mysql mysql -u root -p 123 选中数据库 use 数据库名 导入sql source sql数据库路径
- loadrunner关联——对服务器返回的数据选择性提交
在跟进项目的过程中,才体会到自己之前闷头看书再写小小的测试程序验证的学习方式很没有效率,知道动态关联,却也只是会参数化式的动态关联,这种关联是我们预先知道要提交的数据而进行的关联:更高一级的可能就是使 ...
- Getting Started with JD Edwards EnterpriseOne Interoperability
Overview Every enterprise holds a forest of branched system spread across a number of business uni ...
- Apache与nginx优缺点对比
1.nginx相对于Apache优点: nginx轻量级,同样起web服务,比apache占用更少的内存资源: 抗并发,nginx处理请求是异步非阻塞型的,Apache处理请求是阻塞型的,所以在处理高 ...
- free
free是查看内存的命令 1 2 3 4 5 61 ...
- <java基础学习>02JAVA的基础组成
Java的基础组成 1 关键字 (被赋予了特殊含义的单词) 2 标识符 3 注释 4 常量和变量 5 运算符 6 语句 7 函数 8 数组 关键字 class Demo{ public static ...
- Ubuntu日常问题搜集和解决办法
搜集了日常工作中linuxmint的使用的命令备份和遇到的问题以及解决办法.(持续更新中) 保持ssh链接超时不自动断开 用ssh链接服务端,一段时间不操作或屏幕没输出(比如复制文件)的时候,会自动断 ...
- 不经过 App store 的安装方式(转)
所有安装到真机(非越狱)的应用(可以是 .app ,也可以是 .ipa ,只要编译时选的是编译成 Arm 的就好..app 转 .ipa 只需要一条命令) 都必须经过证书签名.证书主要有三大种: 企业 ...
- callback res.end 记得return(Javascript需要养成的良好习惯)
错误示例: app.get('do',function(req,res,next){ getUserId(function(err,userId){ if(err){ res.end(err);//错 ...