简单的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. JAVA之关于super的用法
			
    JAVA之关于super的用法   路漫漫其修远兮,吾将上下而求索.——屈原<离骚> 昨天写this用法总结的时候,突然产生了一个问题,请教别人之后,有了自己的一点认识.还是把它写下来,为 ...
    
			
    2. 
						
  2. STM32之延时秒,毫秒,微秒
			
    #include "delay.h" #include "stdint.h" #include "stm32f10x.h" ; //us延时 ...
    
			
    3. 
						
  3. 【django入门教程】Django的安装和入门
			
    很多初学django的朋友,都不知道如何安装django开发以及django的入门,今天小编就给大家讲讲django入门教程. 注明:python版本为3.3.1.Django版本为1.5.1,操作系 ...
    
			
    4. 
						
  4. About Closure
			
    Closure被翻译为闭包,C++11引入了Lambda表达式支持Closure,JavaScript支持Closure,Objective C支持Blocks,他们都是Closure,名字各有不同, ...
    
			
    5. 
						
  5. poj2193
			
    //Accepted 368K 532MS //线性dp //dp[i][j]表示前i位最后一个是j的排列数 //dp[i][j]=sum(dp[i-1][h]) h*2<=j #include ...
    
			
    6. 
						
  6. HDU 3829 - Cat VS Dog （二分图最大独立集）
			
    题意:动物园有n只猫和m条狗,现在有p个小孩,他们有的喜欢猫,有的喜欢狗,其中喜欢猫的一定不喜欢狗,喜欢狗的一定不喜欢猫.现在管理员要从动物园中移除一些动物,如果一个小孩喜欢的动物留了下来而不喜欢的动 ...
    
			
    7. 
						
  7. CentOS中配置LNMP环境打开提示File not found
			
    在centos系统中配置好php环境了,但是发现能运行html页面并不能运行php文件了,这样我就在gg的帮助下一步不解决了,下面来看问题的具体解决过程.     安装之后测试发现,怎么Html能运行 ...
    
			
    8. 
						
  8. C#语法问答式总结
			
    传入某个属性的set方法的隐含参数的名称是什么?value,它的类型和属性所声名的类型相同. 如何在C#中实现继承?在类名后加上一个冒号,再加上基类的名称. C#支持多重继承么?不支持.可以用接口来实 ...
    
			
    9. 
						
  9. cometd的js端代码
			
    一:js端使用方式 CometD JavaScript的配置.整个API可以通过一个单一的原型名为org.cometd.Cometd的对象来调用.Dojo工具包中有一个名称为dojox.cometd的 ...
    
			
    10. 
						
  10. 关于RecyclerView中Viewholder和View的缓存机制的探究
			
    关于RecyclerView中Viewholder和View的缓存机制的探究 http://www.cnblogs.com/littlepanpc/p/4241575.html
    
			
    11.