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的精妙展现出来.最近项目打 ...
随机推荐
- iOS类别(Category)与扩展(Extension)-b
苹果的官方文档 Category在iOS开发中使用非常频繁.尤其是在为系统类进行拓展的时候,我们可以不用继承系统类,直接给系统类添加方法,最大程度的体现了Objective-C的动态语言特性. #im ...
- Python模块解析之SocketServer(三)——模块思想
SocketServer 体系 由两个部分构成 BaseServer 和 BaseRequestHandler.思想很简单 BaseServer接受请求,将请求交给BaseReques ...
- Unity图片处理类,包括压缩、截屏和滤镜
先上代码: 1 using System.Threading; using UnityEngine; using System.IO; using System.Collections; public ...
- 【Java】Java Socket编程(1)基本的术语和概念
计算机程序能够相互联网,相互通讯,这使一切都成为可能,这也是当今互联网存在的基础.那么程序是如何通过网络相互通信的呢?这就是我记录这系列的笔记的原因.Java语言从一开始就是为了互联网而设计的,它为实 ...
- Arctic Network
poj2349:http://poj.org/problem?id=2349 题意:有卫星电台的城市之间可以任意联络.没有卫星电台的城市只能和距离小于等于D的城市联络.告诉你卫星电台的个数S,让你求最 ...
- Mysql分页查询
取前5条数据 select * from table_name limit 0,5 或 select * from table_name limit 5 取第11条到第15条数据,共5条 select ...
- C# 绘图对象 流对象 响应对象关系
- 【HDOJ】3088 WORM
状态压缩+BFS. /* 3088 */ #include <iostream> #include <cstdio> #include <cstring> #inc ...
- [Poetize II]七夕祭
描述 Description TYVJ七夕祭和11区的夏祭的形式很像.矩 形的祭典会场由N排M列共计N×M个摊点组成.虽然摊点种类繁多,不过cl只对其中的一部分摊点感兴趣,比如章鱼烧.苹果糖.棉花糖. ...
- bluetooth记录
1. 网址 Client Characteristic Configuration https://developer.bluetooth.org/gatt/descriptors/Pages/Des ...