knockoutjs关键点
<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
<p>You have typed: <span data-bind="text: someValue"></span></p>
someValue: ko.observable("edit me")
部分实例:
<div data-bind="html:details"></div>
<div data-bind="css: { profitWarning: currentProfit() < 0 }">100万 </div>
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
<a data-bind="attr: { href: url, title: details2 }"> Report</a>
Profit Information
</div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div>
<div data-bind="visible: detailsEnabled"> Details </div>
</div>
<input data-bind="value: someModelProperty" />
<p> <input type='checkbox' data-bind="checked: hasCellphone"/> I have a cellphone</p>
<p> Your cellphone number: <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/></p>
<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
<p>You have typed: <span data-bind="text: someValue"></span></p>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="knockout-v2.2.1.js"></script>
<script type="text/javascript">
var myviewModel = {
details: ko.observable(),
currentProfit: ko.observable(150000),
url: ko.observable("year-end.html"),
details2: ko.observable("Report including final year-end statistics"),
numberOfClicks: ko.observable(0),
incrementClickCounter: function () {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
},
detailsEnabled: ko.observable(false),
enableDetails: function () {
this.detailsEnabled(true);
},
disableDetails: function () {
this.detailsEnabled(false);
},
someModelProperty:ko.observable(""),
hasCellphone: ko.observable(false),
cellphoneNumber: ko.observable(""),
someValue: ko.observable("edit me")
};
ko.applyBindings(myviewModel);
myviewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
myviewModel.currentProfit(-50);
</script>
knockoutjs关键点的更多相关文章
- Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单
本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了. 最近在完善Magicodes.WeiChat微信开发框架时,发现之前做的自定义菜单这块太不给力了,而各 ...
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证
验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- knockoutjs如何动态加载外部的file作为component中的template数据源
玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
随机推荐
- (org.hibernate.LazyInitializationException:19) - could not initialize proxy错误
(org.hibernate.LazyInitializationException:19) - could not initialize proxy错误 在刚插入数据后,马上使用dao进行query ...
- 查看Ubuntu操作系统位数
查看系统是32位还是64位 #查看long的位数,返回32或64 getconf LONG_BIT
- JSP页面的异常处理<转>
对于jsp页面错误处理这里大致有两种方式:一.在Web.xml中配置全局的错误异常处理 即凡是该项目下(即虚拟路径下的所有文件)的任意一个文件错误或者异常,都会跳到指定的错误处理页面. ...
- 追踪CM_CONTROLCHANGE消息的产生和执行过程,可以较好的领会VCL的思想(就是到处通知,但耦合性很弱)
追踪CM_CONTROLCHANGE消息的流向,可以较好的 测试代码: procedure TForm1.Button1Click(Sender: TObject);var Image2 : TIma ...
- 禁用页面及页面所有frame内的右键菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...
- 汇编学习笔记(3)[bx]和loop
本文是<汇编语言>一书的学习笔记,对应书中的4-6章. 汇编程序的执行 要想将源代码变为可执行的程序需经过编译.连接两个步骤,WIN7操作系统下需要MASM程序来进行编译连接工作.将MAS ...
- Shader Forge 植物摆动
前日才赞Shader Forge好用,今天就找到了BUG(1.03 版本) -- 获得顶点在物体空间坐标的方法绕来绕去,transform不支持齐次坐标, 不超过3行的shader代码要我出这么一个宏 ...
- 动态规划——树形dp
动态规划作为一种求解最优方案的思想,和递归.二分.贪心等基础的思想一样,其实都融入到了很多数论.图论.数据结构等具体的算法当中,那么这篇文章,我们就讨论将图论中的树结构和动态规划的结合——树形dp. ...
- hdu 4607 Park Visit (dfs)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4607 首先如果k小于等于直径长度,那么答案为k−1.如果k大于直径长度,设直径长度为r,那么答案为r− ...
- Jenkins 八: 构建Git项目
1. 安装git. http://git-scm.com/download/win 下载之后一步步安装即可. 2. 安装插件. 打开"系统管理" –> "管理插 ...