knockout.js的简介和简单使用
1、knockout简介
knockout是一个轻量级的UI类库，通过MVVM模式使JavaScript前端UI简单化
knockout有四大重要概念：
1）声明式绑定：使用简明移读的语法很容易地将模型（model）数据关联到dom元素上。
2）UI界面自动刷新：当宁的模型状态（model state）改变时，您的UI将自动更新
3）依赖跟踪：为转变和联合数据，在你的模型数据之间隐式建立关系
4）模板：为你的模型数据快速编写复杂的可嵌套的UI
2、knockout特性和好处
特性：
优雅的依赖跟踪
声明式绑定
灵活全面的模板
轻易可扩展
好处：
纯javascript类库（兼容任何服务器端和客户端技术）
可添加到web程序最上部（不需要大的架构改变）
简洁的
兼容任何主流浏览器
3、如何使用knockout
声明你的数据作为一个javascript模型对象（model object）,然后dom元素或者模板（templates）绑定到它上面。
下面简介怎样简单使用knockout.js例子
1、现在官网下载最新的knockout.js， 地址： http:www.knockoutjs.com
2、引入knockout.js应注意那些问题
1）用标签<script> src属性引入路径下的knockout.js
2）<script type="text/javascript" src = "js/knockout.js">内容</script>整个放在html文本后面，卸载head里面读取不到js,所以 绑定不到值
3）下面是声明式绑定的一个小例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>knockout的用法</title>
</head>
<body>
用户名称：<span id="username" data-bind="text:username"></span><br/>
用户密码：<span id="password" data-bind="text:password"></span><br/>
邮箱地址：<span id="email" data-bind="text:email"></span><br/>
用户住址：<span id="address" data-bind="text:address"></span><br/>
商品名称：<span id="prodName"></span><br/>
</body>
</html>
<script type="text/javascript" src="js/knockout-3.4.0.js"></script>
<script type="text/javascript">
document.getElementById("prodName").innerHTML="护目镜";
//声明的一个javascript模型对象，对应webform中的类对象
var testjson = {
username:"zhangsan",
password:"1234567",
email:"zhangsan@123.com",
address:"广州天河区"
};
ko.applyBindings(testjson);
</script>
旧的赋值是用document文档对象赋给某个标签的值
用knockout.js方法直接绑定模型对象中的id就行了
运行后的效果也是一样的
当模型对象改变时，UI界面会自动更新
绑定对应的值会自动更新为
knockout.js的简介和简单使用的更多相关文章
- 1.Knockout.Js（简介）
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
- Knockout.Js学习目录
1.Knockout.Js(简介) 2.Knockout.Js(监控属性Observables) 3.Knockout.Js(属性绑定) 4.Knockout.Js(事件绑定) 5.Knockout. ...
- Knockout.Js官网学习（简介）
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
- C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- knockout.js简单实用教程1
第一次接触knockout是在一年多之前吧.当时是接手了一个别人的项目,在项目中有用到knockout来进行数据的绑定.也就开始学习起来knockout.在之后的项目中也多次用到了这个.在第一次开始学 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- 一个简单的 ASP.NET MVC 例子演示如何在 Knockout JS 的配合下，使用 TypeScript 。
前言 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架 ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
随机推荐
- PL-SQL 存储函数和存储过程
PL-SQL 存储函数和存储过程 ORACLE 提供能够把PL/SQL 程序存储在数据库中,并能够在不论什么地方来执行它.这样就叫存储过程或函数. 过程和函数统称为PL/SQL子程序.他们是被命 ...
- Hybris电商方案介绍(企业全渠道) B2B B2C O2O建设
1). 什么是Hybris: hybris software成立于1997年,2013年与SAP整合,成为SAP旗下的一份子,提供全渠道客户互动与商务解决方案,该解决方案能够为各机构提供客户的实时背景 ...
- Spring整合JAX-WS
Jax-ws在使用上很方便,也很轻量级.重点是他是jvnet(dev.java.net)的项目,是基于java标准的(JSR181). 不过它与Spring的整合相对麻烦,于此,我将自己的一些研究结果 ...
- 解决删除域用户Exception from HRESULT: 0x80072030
解决删除域用户异常问题. System.DirectoryServices.DirectoryServicesCOMException was unhandled Message=在服务器上没有这样 ...
- 写给已有编程经验的 Python 初学者的总结
当我开始学习Python的时候,有些事我希望我一早就知道.我花费了很多时间才学会这些东西.我想要把这些重点都编纂到一篇文章当中.这篇文章的目标读者,是刚刚开始学习Python语言的有经验的程序员,想要 ...
- 电商大促准备流程v2
1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...
- 解决php中echo出来的汉子乱码
问的人太多了,就列出来展示给大家! 需要了解的概念: Content-Type:用于定义用户的浏览器或相关设备如何显示将要加载的数据,或者如何处理将要加载的数据 MIME:MIME类型就是设定某种扩展 ...
- WebApp MVC，“不一样”的轻量级互联网应用程序开发框架
WebApp MVC 这是一个专门开发互联网程序的开发框架,跟之前的<EFW框架>使用情况不一样,EFW主要用于开发行业软件的快速开发:而WebApp又区别与别的MVC框架,比如AspNe ...
- Access“输入的表达式中含有一个无效日期值”
环境:access2003 + win7 有图有真相: 明显地看到,日期那里显示了“星期X”,问题的根源就在这里... 更改计算机的日期显示设置为不显示星期~ 方法:点击右下角的时钟-点击“更改日期和 ...
- java---Swing界面开发总结
一.java的图形界面 1.awt java.awt jdk1.4之前推出的图形界面,用c/c++编写,跨平台性不好 2.swing javax.swing jdk1.4时推出的图形界面,跨平 ...