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)