<!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. Axure学习笔记1-－原型设计概述

    Axure原型 1.原型的出现 -软件功能复杂,用户需求多 -挖掘用户的实际需求 -项目组之间降低沟通成本 2.类型: ［草图原型］描述产品大概需求,记录瞬间灵感 ［低保真原型］展示系统的大致结构和基 ...

  2. Rem实现自适应初体验

    第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图.其实轮播图的插件有很多,但是完全满足需求的并不容易找. 需求: 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片,可以自动平铺(有时候图 ...

  3. css3中box-flex的使用

    语法: box-flex:<number> 其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例.设置或检索伸缩盒对象的子元素如何分配其剩余空间. html代码: < ...

  4. UESTC 424 AreYouBusy --混合背包

    混合三种背包问题. 定义:dp[i][k]表示体积为k的时候,在前i堆里拿到的最大价值. 第一类,至少选一项,dp初值全赋为负无穷,这样才能保证不会出现都不选的情况.dp[i][k] = max(dp ...

  5. HDU 3600 Simple Puzzle 归并排序 N*N数码问题

    先介绍八数码问题: 我们首先从经典的八数码问题入手,即对于八数码问题的任意一个排列是否有解?有解的条件是什么? 我在网上搜了半天,找到一个十分简洁的结论.八数码问题原始状态如下: 1 2 3 4 5 ...

  6. throw跟throws关键字

    throws关键字 定义一个方法的时候可以使用throws关键字声明.使用throws关键字声明的方法表示此方法不处理异常,而交给方法调用处进行处理. throws关键字格式: public 返回值类 ...

  7. Lua windows环境搭建

    Lua语言的小巧和功能强大在朋友做的一个项目中得以验证,自己也尝试着了解一下,首先在window系统上搭建一个学习环境. 官网:https://www.lua.org/ 搭建运行环境提供2种方式,源码 ...

  8. spring这么流行的原因是什么

    spring这么流行的原因是什么?对象与对象之间的依赖关系不再通过对象去创建对象了,而是通过配置文件来管理他们的依赖关系.这就是spring的依赖注入机制,这个注入关系在一个叫IOC的容器中管理.在这 ...

  9. Ruby Web实时消息后台服务器推送技术---GoEasy

    越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推 ...

  10. CLR Profiler

    检查c#代码内存泄露工具-CLR Profiler 大家都知道.net有一套自己的内存(垃圾)回收机制,除非有一些数据(方法)长期占有内存不随着垃圾回收功能而释放内存,这样就造成了我们经常说的内存泄露 ...