<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关键点的更多相关文章

  1. Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单

    本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了. 最近在完善Magicodes.WeiChat微信开发框架时,发现之前做的自定义菜单这块太不给力了,而各 ...

  2. 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...

  3. 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证

    验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...

  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 ...

  5. 翻译:使用 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 ...

  6. knockoutjs如何动态加载外部的file作为component中的template数据源

    玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  9. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

随机推荐

  1. BZOJ 1823 满汉全席

    Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...

  2. Unity3d 读取网络xml

    Unity3d 读取网络xml Unity3d 读取网络xml,这个xml文件需要不包含BOM信息,可以用UltraEdit打开xml文件,并且另存为的时候,选择不包含BOM的utf-8格式存储!

  3. 用expect实现自动输入SSH的SCP信息,且不需要另外的文件

    #!/bin/sh ] ; then echo "USAGE: $0 remote_ip serverXXXXX" echo " e.g.: $0 1.2.3.4 ser ...

  4. IAR FOR ARM 7.2.2破解方法

    直接上图,注意选择"NO" 工具下载地址: http://download.csdn.net/detail/lan120576664/7604593 其实发现,该注册工具连IAR ...

  5. 利用Java反射机制完成XML到对象的解析

    对于一些小批量的数据,如果采用数据库来存取的话,未免有点大题小作,使用XML文件是个不错的方法,尤其是在一些Web应用中,经常需要缓存一部分数据,如果将这些数据形成XML文件,解析后放入一个Hasht ...

  6. oracle中的exists 和not exists 用法详解(转)

    有两个简单例子,以说明 “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; ...

  7. Volatile vs. Interlocked vs. lock

    今天在stackoverflow上看到一个关于Volatile, Interlock, Lock的问题,发现回答的特别好,所以就想到把它翻译一下, 希望给那些对它们有疑惑的人提供点帮助 :假设有一个类 ...

  8. Linux&shell之Shell脚本

    写在前面:案例.常用.归类.解释说明.(By Jim) 使用多条命令shell脚本的关键是可以输入多条命令,甚至可以将一条命令的结果传递给另一条命令.date;who(两个命令shell脚本的写法) ...

  9. AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 《转》

    AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: 测试代码如下: <%@ Page Language="C#" AutoE ...

  10. super返回不过来

    class Fruit {     String color = "未确定颜色";     //定义一个方法,该方法返回调用该方法的实例     public Fruit getT ...