<!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四舍五入的取舍

    一.保留2位小数,且四舍五入 String re = new java.text.DecimalFormat("#.##").format(3.14555); 结果:3.15 二. ...

  2. 边工作边刷题：70天一遍leetcode: day 84-3

    Meeting Rooms I/II 要点:这题和skyline类似,利用了interval start有序的特点,从左向右处理,用一个heap来动态表示当前占用rooms的时间段,所以heap的si ...

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

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

  4. java 12 - 5 带有缓冲区的字符流

    字符流为了高效读写,也提供了对应的字符缓冲流. 字符缓冲流:A. BufferedWriter:字符缓冲输出流 B. BufferedReader:字符缓冲输入流 A.BufferedWriter:字 ...

  5. javascript替换手机号中间4位

    // 匹配手机号首尾,以类似“123****8901”的形式输出 '12345678901'.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); 此段正则匹配字符串 ...

  6. 微软职位内部推荐-Senior Development Engineer

    微软近期Open的职位: Job Title: Senior Software Development Engineering Work Location: Suzhou, China Enterpr ...

  7. .Net 内存溢出（System.OutOfMemoryException）的常见情况和处理方式总结

    .Net 内存溢出(System.OutOfMemoryException)的常见情况和处理方式总结 在什么情况下会出现OutOfMemonryException呢? 在我们试图新建一个对象时,而垃圾 ...

  8. 设置Eclipse中的tab键为4个空格的完整方法

    1.点击 window->preference-,依次选择 General->Editors->Text Editors,选中右侧的 insert space for tabs;如下 ...

  9. C语言 二级指针内存模型混合实战

    //二级指针内存模型混合实战 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #i ...

  10. 将博客搬至CSDN（放弃）

    将博客搬至CSDN需要发这篇文章,但是到现在CSDN还没给我发通知,因为急着要记东西,所以不搬了,继续写我下一篇随笔.