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

  1. Java 银联支付官网demo测试及项目整合代码

    注:原文来源与 < Java 银联支付官网demo测试及项目整合代码  > 银联支付(网关支付B2C) 一.测试官网demo a)下载官网开发包,导入eclipse等待修改(下载的开发包没 ...

  2. Knockout官网实例在MVC下的实现-02,实现计次

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...

  3. Knockout官网实例在MVC下的实现-01,实现Hello world

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...

  4. jqgrid--api,官网demo,编辑

    api参考: http://blog.csdn.net/hurryjiang/article/details/7551477 官网demo: http://www.trirand.com/blog/j ...

  5. webpack官网demo起步中遇到的问题

    在webpack官网demo一开始搭建中 

  6. Knockout 官网学习文档目录

    官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...

  7. SpringBoot使用JSP（官网Demo）

    最开始接触java的时候,前端页面基本都是用jsp来写,最近公司项目要使用SpringBoot重构,查看SpringBoot文档,发现SpringBoot不建议使用JSP,因为jsp在使用内嵌serv ...

  8. Knockout 官网翻译

    Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...

  9. 苹果官网 demo The Elements 阅读随笔

    The Elements https://developer.apple.com/library/ios/samplecode/TheElements/Introduction/Intro.html# ...

随机推荐

  1. Uva10082 WERTYU -S.B.S.

    A common typing error is to place the hands on the keyboard one row to the right of the correct posi ...

  2. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  3. 数据结构Java实现05----栈：顺序栈和链式堆栈

    一.堆栈的基本概念: 堆栈(也简称作栈)是一种特殊的线性表,堆栈的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别是线性表允许在任意位置进行插入和删除操作,而堆栈只允许在固定一端进行插入和删除 ...

  4. Java虚拟机详解01----初识JVM

    主要内容如下: JVM的概念 JVM发展历史 JVM种类 Java语言规范 JVM规范 一.JVM的概念: JVM: Java Virtual Machine,意为Java虚拟机. 虚拟机: 指通过软 ...

  5. C# Process执行bat

    Process类 System.Diagnostics 命名空间提供类,使您能够与系统进程.事件日志和性能计数器进行交互. Process类提供对本地和远程进程的访问并使您能够启动和停止本地系统进程. ...

  6. 查​看​和​设​置​o​r​a​c​l​e​数​据​库​的​最​大​连​接​数

    当前的连接数 select count(*) from v$process; 设置的最大连接数(默认值为150) select value from v$parameter where name = ...

  7. Eclipse打开xml文件报校验错误解决办法

    XML文件在Eclipse中报校验错误: The content of element type "web-app" must match "(icon?,display ...

  8. Android SQLite (四 ) 全面详解（二）

    SQLite创建数据库 创建数据库语法: sqlite3 DatabaseName.db 如下展示一个实例: SQLite附加数据库 假设这样一种情况,当在同一时间有多个数据库可用,您想使用其中的任何 ...

  9. <<Effective Java>>之善用组合而不是继承

    使用JAVA这门OO语言,第一要义就是,如果类不是专门设计来用于被继承的就尽量不要使用继承而应该使用组合 从上图2看,我们的类B复写了类A的add喝addALL方法,目的是每次调用的时候,我们就能统计 ...

  10. 如何利用ThoughtWorks.QRCode 生成二维码

    1.引用ThoughtWorks.QRCode.dll 在nuget上查找即可引用,也可自行下载 2.生成二维码静态方法 参数: 二维码内容:fileUrl 二维码图片名:typeName #regi ...