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 ...
随机推荐
- Centos安装vsftp服务
1.安装vsftp yum install vsftpd 2.开启vsftp服务,设置开机自启 service vsftpd restart chkconfig vsftpd on 停止vsftpd: ...
- SPSS数据分析—信度分析
测量最常用的是使用问卷调查.信度分析主要就是分析问卷测量结果的稳定性,如果多次重复测量的结果都很接近,就可以认为测量的信度是高的.与信度相对应的概念是效度,效度是指测量值和真实值的接近程度.二者的区别 ...
- python中在同一个位置输出数据
import sys, time def print_data(): for i in range(5): sys.stdout.write(str(i) + '\r') time.sleep(1) ...
- zencart産品描述加上錨文本
首先,函數會遍曆整段描述,假如一段描述裏面有Hermes wallets這個關鍵詞,那麽函數就會對這個關鍵詞加上鏈接,至于鏈接到哪裏,上面數組裏面有,隻要把數組裏面的内容替換你想要的就可以. 那麽在z ...
- WebForm复杂控件
Calendar 日历: FileUpdate 文件上传: Image 图片,可以直接给URL: Repeater: HeaderTemplate - 在加载开始执行一遍 ItemTemplate ...
- css个人总结
1.什么是css,指的是叠层样式表,控制网页的的外观显示. 2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,<link rel="stylesheec" t ...
- IOS多媒体
概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像 ...
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project LogTest: Compilation failure -> [Help 1]
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default ...
- 开启Win7系统管理员Administrator账户
Win7系统凭借酷炫的界面以及简单.易用.快速.安全等特点,迅速成为全球最受用户喜爱的操作系统,如今Win7已经成为身边很多朋友生活学习工作的好伙伴.在我们使用Win7的时候,有一些软件的正常运行需要 ...
- C++ 知道虚函数表的存在
今天翻看陈皓大大的博客,直接找关于C++的东东,看到了虚函数表的内容,找一些能看得懂的地方记下笔记. 0 引子 类中存在虚函数,就会存在虚函数表,在vs2015的实现中,它存在于类的头部. 假设有如下 ...