简单的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. centos7的网络配置以及设置主机名和绑定IP的问题
			
    CentOS 7.0系统是一个很新的版本哦,很多朋友都不知道CentOS 7.0系统是怎么去安装配置的哦,因为centos7.0与以前版本是有很大的改进哦. 说明:截止目前CentOS 7.x最新版本 ...
    
			
    2. 
						
  2. iOS对象序列化
			
    系统对象的归档我就不介绍了,这个不复杂,自己看一下就会了. 我在这里主要介绍自定义对象的归档. Sample.h文件 // //  Sample.h //  Serialization // //   ...
    
			
    3. 
						
  3. 高效的iOS宏定义
			
    iOS开发过程中使用一些常用的宏可以提高开发效率,提高代码的重用性:将这些宏放到一个头文件里然后再放到工程中的-Prefix.pch文件中(或者直接放到-Prefix.pch中)直接可以使用,灰常方便 ...
    
			
    4. 
						
  4. Apparmor——Linux内核中的强制访问控制系统
			
      AppArmor 因为最近在研究OJ(oline judge)后台的安全模块的实现,所以一直在研究Linux下沙箱的东西,同时发现了Apparmor可以提供访问控制. AppArmor(Appli ...
    
			
    5. 
						
  5. Ubuntu 14.10 下安装MySQL
			
    在Ubuntu上安装MySQL很简单,只需要几个命令行 1 安装服务器 sudo apt-get install mysql-server 2 安装客户端 sudo apt-get install m ...
    
			
    6. 
						
  6. Hash索引和B树索引
			
    要知道磁盘结构优化访问的关键在于以block为单位(比如每次读取一个页面) 这两种索引差别也就在聚集到一个block的标准: B树聚集到一个block是因为关键字在一个范围内,关键字在block内的排 ...
    
			
    7. 
						
  7. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
			
    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
    
			
    8. 
						
  8. UILabel自适应宽度的函数详解
			
    之前用Text Kit写Reader的时候,在分页时要计算一段文本的尺寸大小,之前使用了NSString类的sizeWithFont:constrainedToSize:lineBreakMode:方 ...
    
			
    9. 
						
  9. BZOJ 2241 打地鼠
			
    暴力. 这怎么这么快.... #include<iostream> #include<cstdio> #include<cstring> #include<a ...
    
			
    10. 
						
  10. 我与python3擦肩而过（一）—— Dict与collections.OrderredDict邂逅
			
    最近一直在撸Python Data Analysis上的代码(书是基于Python2的,小白我用的python3),所以我下的时候多少有些改动. 这是9.4中的nltk词频分析关于Dict_key的问 ...
    
			
    11.