<!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. java在url传输前更改字符编码

    几种方式 1. String s = "sds"; s = new String(data_id.getBytes("UTF-8")); 2. 使用get请求 ...

  2. 深搜+回溯 POJ 2676 Sudoku

    POJ 2676 Sudoku Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17627   Accepted: 8538 ...

  3. spring加载xml

    加载文件顺序 情形一:使用classpath加载且不含通配符 这是最简单的情形,Spring默认会使用当前线程的ClassLoader的getResource方法获取资源的URL,如果无法获得当前线程 ...

  4. 在3D Max中查看模型引用的贴图

    需求 假如在Max中有一个模型,想查看贴图 操作步骤 1.右上角点击 2.在弹出材质编辑器中 点击吸管 3.把吸管点击在角色模型上,然后点击M 4.点击查看图像 5.就能查看到模型使用的贴图

  5. Linux平台Java调用so库-JNI使用例子

    1.确保gcc编译器已安装 2.编写HelloJNI.java代码,用native声明需要用C实现的函数.如果源程序是包含在package里的话,应该建立同样的文件夹结构,比如/home/swan/t ...

  6. hydra爆破用法

    -R 根据上一次进度继续破解 -S 使用SSL协议连接 -s 指定端口 -l 指定用户名 -L 指定用户名字典(文件) -p 指定密码破解 -P 指定密码字典(文件) -e 空密码探测和指定用户密码探 ...

  7. 用bower命令创建项目

    1,先安装bower,npm install -g bower 2,cd到项目文件夹下,安装项目所需要的依赖包,比如 npm install jquery;npm install bootstrap, ...

  8. QT QT程序初练

    //界面编程#include "widget.h" #include "ui_widget.h" Widget::Widget(QWidget *parent) ...

  9. Jquery 将表单序列化为Json对象

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...

  10. &10 基本数据结构——栈，队列和链表

    #1,栈(stack) 定义[来自百度]:栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素 ...