简单的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. VS2013项目配置directx11
			
    假定你已经安装好了direct11 SDK(官方下的既是最新版本)和VS2013,并在VS2013中建立了一个新工程. 用VS2013打开工程后,点击右键属性,选择VC++目录: 其中在包含目录中添加 ...
    
			
    2. 
						
  2. vs2013的使用和单元测试
			
    我的vs2013是之前就安装好的,安装过程就不介绍了,我平常编写代码就是用的vs2013,用起来还是很方便的,现在我们就开始使用vs2013进行单元测试 首先我们建立一个项目,项目中选择virtual ...
    
			
    3. 
						
  3. [C/C++]C/C++相关网站
			
    1.http://en.cppreference.com What is the purpose of this site? Our goal is to provide programmers wi ...
    
			
    4. 
						
  4. hadoop shell 操作命令
			
    shell操作命令: hdfs的路径,在core-site.xml中定义 <property> <name>fs.default.name</name> <v ...
    
			
    5. 
						
  5. SharePoint 2013 开发——获取用户配置文件属性内容（User Profile）
			
    博客地址:http://blog.csdn.net/FoxDave 本篇我们应用SharePoint CSOM(.NET)来读取用户配置文件的信息,个人开始逐渐倾向于客户端模型,因为不用远程登录到 ...
    
			
    6. 
						
  6. MongoDB的安装、配置服务（转）
			
      一,简介  MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.  MongoDB是一个高性能,开源,无模式的文档型数据库,是当前 ...
    
			
    7. 
						
  7. Coudera-Manager/CDH的安装和部署
			
    由于之前部署的集群采用的是用apache hadoop的方式来实现,但是考虑到运维的成本问题,下面将apache hadoop转换成cloudera cdh.下面主要讲解一下cloudera cdh的 ...
    
			
    8. 
						
  8. xml文件有误
			
    Unable to start activity ComponentInfo{com.anzi.jmsht.scripturelibrary/com.anzi.jmsht.scripturelibra ...
    
			
    9. 
						
  9. Angularjs相关理论
			
    1.AngularJS的工作流程: (1)浏览器载入HTML,然后把它解析成DOM (2)浏览器载入angularjs脚本 (3)AngularJS等到DOMContentLoaded事件触发 (4) ...
    
			
    10. 
						
  10. win7登入使用的是临时档案解决方法
			
    开始——运行(搜索程序与文件)——regedit——HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileLis ...
    
			
    11.