<!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>

　　

knockout_主页的demo复习的更多相关文章

  1. Android模拟微信主页面的Demo

    Android模拟微信主页面的Demo 效果图如下: 项目结构图如下: ContanctFragment: package com.demo.moniwexin; import android.app ...

  2. Ionic 左侧菜单(登录主页详情demo)

    1.项目结构 2.截图效果展示        3.主要js 代码 $stateProvider .state('app', { url: "/app", abstract: tru ...

  3. iOS Swift最简单的Animation

    最近发现Animation是一个iOS开发中非常好玩的元素,能给应用的交互性增色不少.比如很多音乐应用的菜单从底部弹出和隐藏的效果. Animation最核心的当然就是UIView的animateWi ...

  4. workerman使用编译安装workerman的php环境

    提示 workerman只是一个代码包,如果php环境满足要求,下载后即可使用,实际上没有安装过程. workerman对php环境的要求是: 1.php>=5.3.3,可以运行命令php-v查 ...

  5. Validation in jQuery

    jquery.validate.js github地址 官方主页 doc demo jquery-validation-unobtrusive github地址 demo doc

  6. Vim打开文件中文乱码如何解决?

    今天想找一下之前的随机数组demo复习,在源文件src里用vim打开.java文件,中文出现乱码 vim也是,选项里没有直接选择设置utf-8之类的 查了下网上,http://easwy.com/bl ...

  7. NoHttp详解之NoHttp最基本使用（无封装）

    NoHttp详细使用文档,请点我移步! 这里是一个最基本的使用,在项目中也可以直接这样使用,如果想学习更多请移步NoHttp主页: https://github.com/yanzhenjie/NoHt ...

  8. Python 库打包分发、setup.py 编写、混合 C 扩展打包的简易指南（转载）

    转载自:http://blog.konghy.cn/2018/04/29/setup-dot-py/ Python 有非常丰富的第三方库可以使用,很多开发者会向 pypi 上提交自己的 Python ...

  9. 复习 | 彻底弄懂Flexbox之Demo篇

    flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂 本文主要是的demo演示,想看flexbox语法 请移步flexbox ...

随机推荐

  1. 使用nmon监控服务器性能

    1.下载nmon:http://nmon.sourceforge.net/pmwiki.php?n=Site.Download 2.选择适合Linux系统版本的相应nmon版本,Linux查看系统版本 ...

  2. 最常用的DOS命令

    ping:利用它可以检查网络是否能够连通,用好它可以很好地帮助我们分析判定网络故障,如ping 127.0.0.1tracert:跟踪路由,查询到相应网站的服务器之间所需经过的路由器个数,如trace ...

  3. PHP 运行方式(PHP SAPI介绍)

    SAPI:Server Application Programming Interface 服务器端应用编程端口.它就是PHP与其它应用交互的接口,PHP脚本要执行有很多种方式,通过Web服务器,或者 ...

  4. immutability-javascript

    https://www.sitepoint.com/immutability-javascript/

  5. Socket Programming in C#--Multiple Sockets

    Now lets say you have two sockets connecting to either two different servers or same server (which i ...

  6. C语言 百炼成钢2

    //题目4:输入某年某月某日,判断这一天是这一年的第几天? #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<st ...

  7. OAF与XML Publisher集成(转)

    原文地址:OAF与XML Publisher集成 有两种方式,一种是用VO与XML Publisher集成,另一种是用PL/SQL与XML Publisher集成 用VO与XML Publisher集 ...

  8. js屏蔽回车键

    document.onkeydown = function () {            if (window.event && window.event.keyCode == 13 ...

  9. Linux 删除文件夹和文件命令

    inux删除目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目录名字-r 就是 ...

  10. Java系列：JVM指令详解（上）（zz）

    一.未归类系列A 此系列暂未归类. 指令码    助记符                            说明    59:iastore    60:lload 6       //因为str ...