<!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. 循环 wxl

    #include <cstdio> #include <cstring> #include <string> #include <algorithm> ...

  2. Windows事件ID大全

    51 Windows 无法找到网络路径.请确认网络路径正确并且目标计算机不忙或已关闭.如果 Windows 仍然无法找到网络路径,请与网络管理员联系. 52 由于网络上有重名,没有连接.请到“控制面板 ...

  3. UESTC 882 冬马党 --状压DP

    定义:dp[i][j]为状态为j时,第i行符合条件的状态数 转移方程:dp[i][j] += dp[i-1][t]   //t为上一行状态,与当前行不冲突. 从第一行开始向下枚举,每次枚举当前行的状态 ...

  4. HDU 4121 Xiangqi --模拟

    题意: 给一个象棋局势,问黑棋是否死棋了,黑棋只有一个将,红棋可能有2~7个棋,分别可能是车,马,炮以及帅. 解法: 开始写法是对每个棋子,都处理处他能吃的地方,赋为-1,然后判断将能不能走到非-1的 ...

  5. 2014 Super Training #4 D Paint the Grid Again --模拟

    原题:ZOJ 3780 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3780 刚开始看到还以为是搜索题,没思路就跳过了.结 ...

  6. Treap（树堆）：随机平衡二叉树实现

    本文是根据郭家宝的文章<Treap的原理及实现>写的. #include<stdio.h> #include<string.h> #include<stdli ...

  7. MySQL数据库学习笔记（二）----MySQL数据类型

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  8. python基础随笔

    一: 作用域 对于变量的作用域,只要内存中存在,该变量就可以使用. 二:三元运算 name = 值1 if 条件 else 值2 如果条件为真:result = 值1 如果条件为假:result = ...

  9. JavaScript---闭包和作用域链

    作用域和作用域链: 参考文章 :http://www.cnblogs.com/malinlin/p/6028842.html  http://www.cnblogs.com/lhb25/archive ...

  10. 03SpringMvc_自定义的spring.xml配置文件和逻辑视图名

    这篇文章的目的是实现Struts2中一种形式(封装视图的逻辑名称),在Struts2中Action处理后会返回"SUCCESS"这样,然后根据"SUCCESS" ...