<!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. QEMU启动时插入tap虚拟网卡

    1.利用brctl命令创建虚拟网桥br0 brctl addbr br0 ifconfig br0 up //上述两条命令分开执行会导致网络断开 2.将虚拟网桥br0与物理网卡eth0绑定 brctl ...

  2. Mysql如何清空数据库的所有表数据

    1.先查询出库中的所有表,“db”是数据库名称 SELECT CONCAT('truncate table ',TABLE_NAME,';') AS a FROM INFORMATION_SCHEMA ...

  3. [AS3] 问个很囧的问题: 如何遍历Dictionary?

    可以使用 for...in 循环或 for each...in 循环来遍历 Dictionary 对象的内容. for...in 循环用于基于键进行遍历: 而 for each...in   循环用于 ...

  4. jira与readmine区别

    JIRA适合多人的团队(100+),而Readmine适合中小型团队. Redmine是用ruby开发的基于web的项目管理软件,免费.JIRA收费Redmine可以创建子任务,而jira不易创建子任 ...

  5. android源码在线查看

    http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/

  6. Android事件分发机制完全解析，带你从源码的角度彻底理解

    Android事件构成 在Android中,事件主要包括点按.长按.拖拽.滑动等,点按又包括单击和双击,另外还包括单指操作和多指操作.所有这些都构成了Android中的事件响应.总的来说,所有的事件都 ...

  7. （转） C#多线程赛跑实例

    专于:http://blog.csdn.net/lidatgb/article/details/8363035 结合上篇<多线程的基础>,这次我们写一个多线程的赛跑实例,内容很简单:超人和 ...

  8. 在Function对象上扩展method方法

    ;(function() { /** * 在Function对象上扩展method方法 * @param {String} name 扩展的方法名称 * @param {Function} callb ...

  9. Silverlight 利用DataGrid行加载事件动态控制行列显示

    datagrid的绑定很好用,但有时候我们往往需要根据model内容来动态控制行或者列,该怎么办呢? 这时候,我们就需要用到行加载事件:在加载每一行数据的时候,根据数据的内容来控制相应的表格显示. 比 ...

  10. 使用dynamic获取类型可变的json对象

    标题可能有点含糊不清 我这个例子的来源是,对方会返回给我json,不过成功的json与失败的json是不同的对象 我想用一个方法获取到这个对象的所有属性并打印到log中 因为是动态变化的,所以第一个想 ...