knockout——官网demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<span>1:<b data-bind="text:stringValue"></b></span><br>
<span>2:<b data-bind="text:passwordValue"></b></span><br>
<span>3:<b data-bind="text:booleanValue"></b></span><br>
<span>4:<b data-bind="text:boolean"></b></span><br>
<span>5:<b data-bind="text:selectedOptionValue"></b></span> <!---valueUpdate是可以实时更新的可选选项--->
<input data-bind="value:stringValue,valueUpdate: 'afterkeydown'">
<input data-bind="value:passwordValue,valueUpdate: 'afterkeydown'">
<input data-bind="value:booleanValue,valueUpdate: 'afterkeydown'">
<input type="checkbox" data-bind="checked: boolean">
<select data-bind="options: selectMutiple,value: 'selectedOptionValue'"></select>
<script>
var V = function(){
this.stringValue = ko.observable(0);
this.passwordValue = ko.observable(0);
this.booleanValue = ko.observable(0);
this.boolean = ko.observable(true);
this.selectMutiple = ["Alpha", "Beta", "Gamma"];
this.selectedOptionValue = ko.observable("Gamma")
};
ko.applyBindings(new V())
</script>
</body>
</html>
//demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<form data-bind="submit:addItem">
<input type="text" data-bind="value: item"/>
<button type="submit">submit</button>
<select multiple="multiple" data-bind="options: items"></select>
</form>
<script> var V = function(){
this.item = ko.observable("qihao");
this.addItem = function(){
if( !this.item() )return;
console.log(this.items)
this.items.push( this.item() )
}.bind(this);
this.items = ko.observableArray(["nono","super"]) //绑定的是数组
}; ko.applyBindings( new V );
</script>
</body>
</html>
//DEMO3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>knockOut</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<!--
<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>
-->
<br>
<!--
<h2>age is : <b data-bind="text: age"></b></h2>
<h2>age input : <input data-bind="value: cAge" /></h2>
--> <div>click<b data-bind="text: count"></b></div>
<div><button data-bind="click : addCount, disable: vis">inc</button></div>
<div data-bind="visible: vis"><button data-bind="click : reset">reset</button></div>
<script>
function V(){
this.count = ko.observable(0); this.addCount = function(){
this.count( this.count()+1 );
};
this.vis = ko.computed(function(){
return this.count()>3
},this);
this.reset = function(){
this.count(0)
};
}
ko.applyBindings( new V() )
/*
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last); //只要在该作用域里面有字段发生改变，就重新计算该内容的值
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}; console.log( new ViewModel("Planet", "Earth") )
ko.applyBindings(new ViewModel("Planet", "Earth"));
*/
/*
var AgeBind = function(v){ this.cAge = ko.observable(v);
//这个是只要当前作用域的字段发生改变，就重新计算生成值
this.age = ko.computed(function(){
return this.cAge();
},this);
};
ko.applyBindings(new AgeBind("28"))
*/
</script>
</body>
</html>
knockout——官网demo的更多相关文章
- Java 银联支付官网demo测试及项目整合代码
注:原文来源与 < Java 银联支付官网demo测试及项目整合代码 > 银联支付(网关支付B2C) 一.测试官网demo a)下载官网开发包,导入eclipse等待修改(下载的开发包没 ...
- Knockout官网实例在MVC下的实现-02,实现计次
本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...
- Knockout官网实例在MVC下的实现-01,实现Hello world
本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...
- jqgrid--api,官网demo,编辑
api参考: http://blog.csdn.net/hurryjiang/article/details/7551477 官网demo: http://www.trirand.com/blog/j ...
- webpack官网demo起步中遇到的问题
在webpack官网demo一开始搭建中
- Knockout 官网学习文档目录
官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...
- SpringBoot使用JSP（官网Demo）
最开始接触java的时候,前端页面基本都是用jsp来写,最近公司项目要使用SpringBoot重构,查看SpringBoot文档,发现SpringBoot不建议使用JSP,因为jsp在使用内嵌serv ...
- Knockout 官网翻译
Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...
- 苹果官网 demo The Elements 阅读随笔
The Elements https://developer.apple.com/library/ios/samplecode/TheElements/Introduction/Intro.html# ...
随机推荐
- poj1459 Power Network (多源多汇最大流）
Description A power network consists of nodes (power stations, consumers and dispatchers) connected ...
- A*寻路初探 GameDev.net
A*寻路初探 GameDev.net MulinB按:经典的智能寻路算法,一个老外写的很透彻很清晰,很容易让人理解神秘的A*算法.以下是一个中文翻译版. A*寻路初探 GameDev.net 作者: ...
- iOS9新特性——堆叠视图UIStackView
一.引言 随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第三方的框架,对于创建约束来说,已经十分方便,但 ...
- 2666 Accept Ratio（打表AC）
2666 Accept Ratio 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 某陈痴迷 ...
- sp_executesql介绍和使用
原文:http://www.cnblogs.com/wanyuan8/archive/2011/11/09/2243483.html execute相信大家都用的用熟了,简写为exec,除了用来执行存 ...
- 《JAVA与模式》之适配器模式(转)
在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...
- Linux 信号概念
程序在执行的时候,几乎任何时刻都会反生事件. 信号通常用来向一个进程通知事件. 信号是不可提前预知的,所以信号是异步的. 信号随时都可能发生,接收信号的进程也可以没有控制权. 每个信号名都以SIG开头 ...
- 深入了解view以及自定义控件
参考文章: http://blog.csdn.net/guolin_blog/article/details/12921889 Android LayoutInflater原理分析,带你一步步深入了解 ...
- Activiti系列：带有serviceTask的或者定时启动任务的流程部署失败的原因分析
在将两个带有serviceTask任务的流程部署到数据库的时候发现无法导入,最终分析出如下问题: 1)流程1是打算让定时启动事件可以每小时触发一次 由于原来是用 R/2015-11-01T01:00: ...
- eclipse系列: Cannot change version of project facet Dynamic web的解决方法
问题描述 用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servl ...