简单的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. OpenCV之响应鼠标（四）：在图像上绘制出矩形并标出起点的坐标
			
    涉及到两方面的内容:1. 用鼠标画出矩形.2.在图像上绘制出点的坐标 用鼠标绘制矩形,涉及到鼠标的操作,opencv中有鼠标事件的介绍.需要用到两个函数:回调函数CvMouseCallback和注册回 ...
    
			
    2. 
						
  2. iOS中Block使用探索
			
    Block介绍 Block在ios 4.0之后加入,并大量使用在新的ios api中.block是一个匿名的代码块,可以传递给其他对象的参数,并得到返回值.从本质上讲,block同其他普通的变量类似, ...
    
			
    3. 
						
  3. 根据username查找user
			
    返回的是一个list<User>,不过验证密码的时候,要求返回是一个user对象,如果用uniqueresult,这个是过时的方法,如果用getResultList 会得到一个列表,get ...
    
			
    4. 
						
  4. HTML--1标签表格
			
    HTML   内容(Hyper Text Markup Language,超文本标记语言) CSS    网页美化 Javascript    脚本语言 打开DREAMWEAVER,新建HTML,如下 ...
    
			
    5. 
						
  5. 微软TechEd2013大会将在北京、上海召开！
			
    微软TechEd2013大会将在北京.上海召开 大家期盼已久的微软TechEd2013大会终于到来了! 我公司依旧是微软公司指定票商 ,继续为您提供最最优质的售前咨询.最最完善的售后服务! 微软Tec ...
    
			
    6. 
						
  6. 功率与dbm的对照表
			
     功率与dbm的对照表 分类: 嵌入式 功率与dbm的对照表 对于无线工程师来说更常用分贝dBm这个单位,dBm单位表示相对于1毫瓦的分贝数,dBm和W之间的关系是:dBm=10*lg(mW)1w的功 ...
    
			
    7. 
						
  7. MyEclipse 安装目录下找不到Common目录
			
    最近在安装了MyEclipse,由于是自己指定的安装目录,在成功安装后要破解的时候却发现找不到安装目录下的Common目录,很是郁闷,后来发现如下: MyEclipse启动后的上方导航中找到MyEcl ...
    
			
    8. 
						
  8. 2016 - 1- 22 Build a Nav bar (intro to HTML&CSS)
			
    一:Learn how to build a NavBar --- allow user navigate ur site 1. The hypetext refrence link This att ...
    
			
    9. 
						
  9. js jquery 判断函数是否存在（$.isFunction函数的使用）
			
    var fun = "testFun"; // 函数的名称 try{ 3 if($.isFunction(fun)){ } } $.alert(fun +'不是函数!'); } 注 ...
    
			
    10. 
						
  10. Spring MVC配置文件解释
			
    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
    
			
    11.