<!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. selenium依次点击页面的删除按钮

    需要依次点击页面的删除按钮,如下图: @Test public static void FaBu() { TestMenuJump.jumpExam(driver); TestMenuJump.jum ...

  2. TopCoder SRM 633 Div.2 500 Jumping

    题意:给一个点(x,y),给一些步长delta1,delta2...deltaN,问从(0,0)严格按照步长走完N步后能否正好到达(x,y)点. 解法:其实就是判断这些线段和(0,0)-(x,y)这条 ...

  3. Unity脚本生命周期

    前言 说到生命周期,影响最深刻的是,在接触Java的JSF组件时,JSF组件的五大生命周期,全要默写出来,嘿嘿…… 总结这两天在写小怪和掉落的糖葫芦时,老是遇到GameObject未销毁,一直存在场景 ...

  4. [km] 如何判断一个直播系统是否使用的是RTMP

    如何判断一个直播系统是否使用的是RTMP from: http://peiqiang.net/2016/03/21/how-to-judge-whether-rtmp-is-used-by-a-liv ...

  5. 使用JspStudy集成环境快速部署jsp项目

    1. 安装jdk 本人网盘资源:https://yunpan.cn/ckZLNbqxkDYYe (提取码:b5e8) 去jdk官网下载最新的jdk: http://www.oracle.com/tec ...

  6. Java虚拟机工作原理详解 ( 二 )

    首先这里澄清两个概念:JVM实例和JVM执行引擎实例,JVM实例对应了一个独立运行的Java程序,而JVM执行引擎实例则对应了属于用户运行程序的线程:也就是JVM实例是进程级别,而执行引擎是线程级别的 ...

  7. HTML5和css3的总结四

    HTML5的新东西总结四: 1>video和audio 声明方法(可以制作背景音乐) var oV/oA=new Video()/Audio(); oV/oA.src=''; oV/oA.pla ...

  8. python-基础案例

    范例一: 练习:元素分类 有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值 ...

  9. f2fs源码解析(五) node管理结构梳理

    node是f2fs重要的管理结构, 它非常重要! 系统挂载完毕后, 会有一个f2fs_nm_info结构的node管理器来管理node的分配. f2fs_nm_info中最让人疑惑的是几颗基数树: s ...

  10. 快钱支付与Sql Server的乐观锁和悲观锁

    在实际的多用户并发访问的生产环境里边,我们经常要尽可能的保持数据的一致性.而其中最典型的例子就是我们从表里边读取数据,检查验证后对数据进行修改,然后写回到数据库中.在读取和写入的过程中,如果在多用户并 ...