zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    寻找大富翁
    C++ STL sort()函数用法
    众数
    平方因子
    Hdu 1089 A+B for Input-Output Practice (I)
    Hdu 1090 A+B for Input-Output Practice (II)
    Hdu 1083 Courses
    Hdu 1069 Monkey and Banana
    Hdu 1062 Text Reverse
    Hdu 1068 Girls and Boys
  • 原文地址:https://www.cnblogs.com/diligenceday/p/3658960.html
Copyright © 2011-2022 走看看