<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. Java 内部类种类及使用解析

    package com.learnjava.innerclass; class MemberInner { private int d = 1; private int a = 2; // 定义一个成 ...

  2. 跨平台的zip文件压缩处理,支持压缩解压文件夹

    根据minizip改写的模块,需要zlib支持 输出的接口: #define RG_ZIP_FILE_REPLACE 0 #define RG_ZIP_FILE_APPEND 1 //压缩文件夹目录, ...

  3. ASP.NET 安全认证

    一. 新建一个测试项目 新建一个测试项目,包含三张页面(Default.aspx.Login.aspx.UserInfo.aspx).   二. 修改 Web.config 1.把<authen ...

  4. C++类:private、public、friend、protected的区别

           private和public的作用是让编译器帮你检查某些模块是否使用了他没权限使用的模块,也就是生成可执行代码的时候做权限检查.比如,公司里各个部门有自己私有的信息,财务部可以看所有员工 ...

  5. 【HDOJ】3242 List Operations

    注意以下数据:[] ++ [][] -- [1,2][1,2] ++ [][] ++ [1][2] ++ [][2,3] -- []结果是[][][1,2][1][2][2,3] /* 3242 */ ...

  6. java学习之运算符

    学习完了变量+常量,现在只能简单的声明变量+赋值+打印变量. 但是程序要做的就是去处理数据,把原本散乱的数据,处理成有意义的数据,供我们来使用,这就涉及到了运算符的应用. 算数运算符常用的种类: 加法 ...

  7. ♫【RequireJS】grunt-contrib-requirejs

    gruntjs / grunt-contrib-requirejs 使用r.js优化require.js项目 define("b",[],function(){return fun ...

  8. HDU 4612 Warm up(手动扩栈,求树上哪两个点的距离最远)

    题目大意: 给你一个无向图,问加一条边之后最少还剩下几座桥. (注意重边处理)   分析:其实当我们把边双连通分量给求出来之后我们就能将连通块求出来,这样我们就可以重新构图.重新构造出来的图肯定是一颗 ...

  9. 网络流(最大密集度子图,分数规划):UvaLive 3709 Hard Life

    John is a Chief Executive Officer at a privately owned medium size company. The owner of the company ...

  10. Java---对象与类的封装

    一.类和对象: package cn.hncu.Myclasslearn; /** * * @author hncu_chx * * Mylove amin */ /**类是一种数据类型,声明一个类就 ...