<!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. 利用OpacityMask制作打洞效果

    起因 项目上存在一个连线功能,在设计的原型中,在连线中间文字上下各有15像素的空白.接手的同事觉得没思路,问我能不能在不影响连线后面的背景情况下解决该问题.我就抽了点时间给他写了个Demo.回家后趁热 ...

  2. Mybaits学习总结1

    http://www.cnblogs.com/xdp-gacl/p/4261895.html 参考了这篇文章搭建了Mybaits环境,原作者有些地方没有标注使用某种编码,我是自学SQL的,所以深知编码 ...

  3. MString 与 QString 互转

    MQtUtil static MString  toMString (const QString &qstr)   Convenience utility to convert a QStri ...

  4. Linux系统批量化安装部署之Cobbler

    说明: Cobbler服务器系统:CentOS 5.10 64位 IP地址:192.168.21.128 需要安装部署的Linux系统: eth0(第一块网卡,用于外网)IP地址段:192.168.2 ...

  5. UITableViewCell动态AutoLayout布局

    相关链接: 使用Autolayout实现UITableView的Cell动态布局和高度动态改变 IOS tableView cell动态高度 (autoLayout) AutoLayoutClub 使 ...

  6. templatecolumn checkcolumn

  7. 17Mybatis_动态sql-sql片段

    这篇文章讲一下sql片段. 讲一下sql片段的的需求: 将上边实现的动态sql判断代码块抽取出来,组成一个sql片段.其它的statement中就可以引用sql片段. 方便程序员进行开发. 第一步我们 ...

  8. Delphi7 安装ICS,与简单使用

    官网 http://www.overbyte.be/ 下载 OverbyteIcsV816 完成后解压到E:\Delphi7\OverbyteIcsV816\ 1.在library里加入E:\Delp ...

  9. web前端开发资源整理

    webpack中文文档 http://webpackdoc.com/index.html 饿了么UI http://mint-ui.github.io/#!/zh-cn http://element. ...

  10. 如何配置CentOS或者RedHat5.X、6.X、7.X的网络yum源

    第一步:找到一个可靠的yum源 中科大帮助:https://lug.ustc.edu.cn/wiki/mirrors/help/centos源:http://mirrors.ustc.edu.cn/c ...