knockout_主页的demo复习

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<div data-bind="foreach: peoples">
	<p>Person<span data-bind="text: person"></span></p>
    <ul data-bind="foreach: children">
    	<li data-bind="text : $data"></li>
    </ul>
    <h4 data-bind="visible: $root.showTime">
    <!--
    <h4 data-bind="visible: $parent.showTime">这样也行;
    -->
    	render time  = <b data-bind="text: new Date().getSeconds()"></b>
    </h4>
    <input type="text" data-bind="value:childValue">
    <button data-bind="click: addChild">addOne</button>
</div>
<label for="times">
	<input type="checkbox" data-bind="value: showTime"/>
</label>
<script>
//在knockout中的所有绑定都是通过 元素属性的 data-bind=""进行绑定的,只要有两种绑定方式:ko.observable绑定变量,ko.observableArray绑定数组;
function Person(name,child) {
	this.person = ko.observable();
	this.children = ko.observableArray(child);
	this.childValue = ko.observable("c0");
	this.addChild = function(){
		this.children.push( this.childValue )
	}
};
var peoples = {
	peoples : [new Person("t",["7","8","9"]),new Person("tt",["6","5","4"]),new Person("qihao",["1","2","3"])],
	showTime : ko.observable(false)
};
ko.applyBindings( peoples );
</script>
</body>
</html>

  

posted @ 2014-04-11 16:26  方方和圆圆  阅读(357)  评论(0编辑  收藏  举报

再过一百年, 我会在哪里?