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 ...
随机推荐
- uva 839 Not so Mobile-S.B.S.
Before being an ubiquous communications gadget, a mobilewas just a structure made of strings and wir ...
- poj 1463 Strategic game DP
题目地址:http://poj.org/problem?id=1463 题目: Strategic game Time Limit: 2000MS Memory Limit: 10000K Tot ...
- Android驱动调试利器Busybox之初体验
工欲善其事必先利其器,之前做WinCE开发时,经常写一些小工具以提高开发调试的效率,如WinCE驱动调试助手.WinCE串口调试助手.WinCE6.0寄存器访问工具.WinCE远程桌面助手和S3C24 ...
- python中property干什么用的？
先来段官方文档压压惊.. property(fget=None, fset=None, fdel=None, doc=None) Return a property attribute. fget i ...
- 使用Unity3D引擎开发赛车游戏
Car Tutorial 在Unity3D的Asset Store有一个赛车的Demo —— Car Tutorial,看起来特别酷的赛车游戏Demo,不过我还没有下载下来,因为在公司下载Assets ...
- Unity的物理材质
Physic Materials资源包 在Unity中的项目导入Unity自带的资源包 Physic Materials,自带的资源包有不同种类的物理材质: Bouncy:有弹性的 Ice:结冰 Me ...
- Linux命令学习－sed
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为: sed ...
- smarty中section遍历数组
smarty中section遍历数组
- React Native iOS环境搭建
前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
- 什么是json
http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html http://edu.51cto.com/lesson/id-71123 ...