简单的knockoutjs实现

1、knockoutJs是在MVVM的机制下实现的，所以要有view（HTML页面中的DOM标签）和viewModel（JavaScript中的js代码）。

2、在view中通过data-bind进行数据绑定。

3、在js中通过ko.observable()和ko.applyBindings()方法进行绑定。

4、过程

（1）建立html页面

（2）引入jQuery库和knockoutjs库

（3）建立html标签

（4）js代码实现绑定





<!DOCTYPE html>

<html>

<head>

<script type='text/javascript' src='js/jquery-1.10.2.js'></script>

<!--引入knockoutjs库，即knockoutJs安装-->

<script type='text/javascript' src='js/knockout.js'></script>

    <meta charset="UTF-8"/>

    <title>simple test</title>

</head>

<body>

<!--view 绘制HTML页面，实现knockoutJs绑定<span data-bind="text:personName">  text用于显示文字， 显示名字和年龄-->

The name is <span data-bind="text:personName"></span>

<br>

The age is <span data-bind="text:personAge"></span>

<script type="text/javascript">

    //定义用户名和年龄

    var  name = "Bob";

    var age = 12;

    //给输出的内容进行赋值

    //ko.observable 提供参数的动态变化

    var myViewModel = {

        personName: ko.observable(name),

        personAge: ko.observable(age)

    };

    //通过ko.applyBindings()方法进行绑定

    ko.applyBindings(myViewModel);

 </script>

</div>

</body>

</html>




												


											
knockoutJs基础1 - 简单的knockoutjs实现的更多相关文章
	

    
								
  1. mysql数据库基础的简单操作指南
		
    最近在学习mysql,本文是做的关于mysql学习的笔记,跟大家分享一下,希望对大家学习mysql知识有所助益.mysql现在几乎已经成了网站建设的主流数据库,很多php网站系统都采用了mysql数据 ...
    
		
    2. 
						
  2. ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...
    
		
    3. 
						
  3. ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 登录登出 上一章节我们总算完善了注册的功能,而且也添加了一个用户,现 ...
    
		
    4. 
						
  4. ASP.NET Core 新增用户 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core 新增用户 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 新增用户 上一章节我们实现了一个注册表单,但也留了一些东西还没完成, ...
    
		
    5. 
						
  5. ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 用户注册 上一章节我们终于迁移完了 Identity 的数据,也创建 ...
    
		
    6. 
						
  6. ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 迁移数据 上一章节中我们配置了  ...
    
		
    7. 
						
  7. ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 配置 上一章节我们简单介绍了下 Id ...
    
		
    8. 
						
  8. ASP.NET Core Identity 验证特性 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core Identity 验证特性 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 验证特性 上一章节我们简单介绍了 ...
    
		
    9. 
						
  9. ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程，简单编程
		
    原文:ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 框架 前面我们使用了 N 多个章节, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. iOS：图片拉伸不变形技巧
			
    方法: 假设图片为60*24 CGFloat top = image.height*0.5-1; // 顶端盖高度 CGFloat bottom = top ; // 底端盖高度 CGFloat le ...
    
			
    2. 
						
  2. Windows 8.1 Update 2更新了什么？
			
    Windows 8.1的第二个更新将于8月12日(周二补丁日)发布,官方命名是“8月更新”(August Update).但是之前我们已经知道Windows 8.1 Update 2不可能重新提供开始 ...
    
			
    3. 
						
  3. Oracle GoldenGate 12c (12.1.2.0.1) for IBM DB2 iSeries
			
    OGG 12.1.2.0.1 for iSeries 在2014.2.15发布,主要新增如下功能: 本地交付(Native Delivery Replicat):新功能允许用户在IBM i服务器上安装 ...
    
			
    4. 
						
  4. yum源的更新问题
			
    我们知道在linux下安装软件的方法有多种多样,其中利用yum的方式来安装较为简单,但需要等待的时间比较长.下面介绍一下如何更新yum的源的问题. 首先需要保证的是linux的机器能上网.然后按照下面 ...
    
			
    5. 
						
  5. Linux下进程的建立
			
    Linux下进程的建立 我们都知道,进程就是正在执行的程序.而在Linux中,可以使用一个进程来创建另外一个进程.这样的话,Linux的进程的组织结构其实有点像Linux目录树,是个层次结构的,可以使 ...
    
			
    6. 
						
  6. poj2891 拓展欧几里得
			
    //Accepted 164 KB 16 ms //拓展欧几里得 //m=a1*x+b1 --(1) //m=a2*(-y)+b2 --(2) //->a1*x+a2*y=b2-b1 //由欧几 ...
    
			
    7. 
						
  7. Linux Mint下安装JDK
			
    Linux Mint 17下安装的是默认的OpenJDK,可以使用java -version查看 现在需要使用Sun/Oracle官方的JDK:http://www.oracle.com/techne ...
    
			
    8. 
						
  8. Drools规则文件结构说明
			
    一.规则文件构成 package(规则文件所在包) import(导入java包) global(规则文件中的"全局变量") function(函数) query(查找) rule ...
    
			
    9. 
						
  9. AmazeUI布局
			
    AmazeUI使用了12列的响应式网络系统.使用时需在外围容器上添加.am-g class,在列上添加.am-u-[sm|md|lg]-[1-12] class,然后根据不同的屏幕需求设置不同的宽度. ...
    
			
    10. 
						
  10. IAP 程序内购
			
    最近用到IAP内置购买,阅读官方文档,在网上找了些资料,在这里作下整理,以便日后查找和修改,主要流程方向确定,文档和相关转载内容截图不一一指出,google一堆. 1.查找官方文档,两张目录截图,对主 ...
    
			
    11.