knockout_主页的demo复习
<!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复习的更多相关文章
- Android模拟微信主页面的Demo
Android模拟微信主页面的Demo 效果图如下: 项目结构图如下: ContanctFragment: package com.demo.moniwexin; import android.app ...
- Ionic 左侧菜单(登录主页详情demo)
1.项目结构 2.截图效果展示 3.主要js 代码 $stateProvider .state('app', { url: "/app", abstract: tru ...
- iOS Swift最简单的Animation
最近发现Animation是一个iOS开发中非常好玩的元素,能给应用的交互性增色不少.比如很多音乐应用的菜单从底部弹出和隐藏的效果. Animation最核心的当然就是UIView的animateWi ...
- workerman使用编译安装workerman的php环境
提示 workerman只是一个代码包,如果php环境满足要求,下载后即可使用,实际上没有安装过程. workerman对php环境的要求是: 1.php>=5.3.3,可以运行命令php-v查 ...
- Validation in jQuery
jquery.validate.js github地址 官方主页 doc demo jquery-validation-unobtrusive github地址 demo doc
- Vim打开文件中文乱码如何解决?
今天想找一下之前的随机数组demo复习,在源文件src里用vim打开.java文件,中文出现乱码 vim也是,选项里没有直接选择设置utf-8之类的 查了下网上,http://easwy.com/bl ...
- NoHttp详解之NoHttp最基本使用（无封装）
NoHttp详细使用文档,请点我移步! 这里是一个最基本的使用,在项目中也可以直接这样使用,如果想学习更多请移步NoHttp主页: https://github.com/yanzhenjie/NoHt ...
- Python 库打包分发、setup.py 编写、混合 C 扩展打包的简易指南（转载）
转载自:http://blog.konghy.cn/2018/04/29/setup-dot-py/ Python 有非常丰富的第三方库可以使用,很多开发者会向 pypi 上提交自己的 Python ...
- 复习 | 彻底弄懂Flexbox之Demo篇
flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂 本文主要是的demo演示,想看flexbox语法 请移步flexbox ...
随机推荐
- runc start container流程分析
1.runc/start.go Action: func(context *cli.Context) error 该函数首先调用container, err := getContainer(conte ...
- MIT jos 6.828 Fall 2014 训练记录（lab 1）
注: 源代码参见我的github:https://github.com/YaoZengzeng/jos Part 1: PC Bootstrap +------------------+ <- ...
- 循环队列+堆优化dijkstra最短路 BZOJ 4152: [AMPPZ2014]The Captain
循环队列基础知识 1.循环队列需要几个参数来确定 循环队列需要2个参数,front和rear 2.循环队列各个参数的含义 (1)队列初始化时,front和rear值都为零: (2)当队列不为空时,fr ...
- codeforces 713A A. Sonya and Queries(状态压缩)
题目链接: A. Sonya and Queries time limit per test 1 second memory limit per test 256 megabytes input st ...
- bzoj-3288 3288: Mato矩阵(数论)
题目链接: 3288: Mato矩阵 Time Limit: 10 Sec Memory Limit: 128 MB Description Mato同学最近正在研究一种矩阵,这种矩阵有n行n列第i ...
- 抓取天猫和淘宝的详情页图片|Golang
taobao.go package main import ( "crypto/md5" "encoding/hex" "fmt" &quo ...
- JMeter学习（十九）JMeter测试MongoDB
JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接进行测试MongoDB,还有一种是写Java代码方式测试MongoDB性能. 第一种方法 1.编写Java代码,内容如下: pa ...
- java22 - 1 多线程之 单线程和多线程的图解
- java 12-1 StringBuffer类
线程安全(多线程讲解) 安全 -- 同步 -- 数据是安全的--效率低一些 不安全 -- 不同步 -- 数据不安全--效率高一些 安全和效率问题是永远困扰我们的问题. 安全:医院的网站,银行网站 效率 ...
- Spring MVC之cookies跟session 数据绑定
在我最早接触web开发的中学时代,学习的asp技术对于session的概念其实很清楚 Session("username")="张三"下次要用的时候,直接用se ...