1、knockout简介
knockout是一个轻量级的UI类库, 通过MVVM模式使JavaScript前端UI简单化
knockout有四大重要概念:
1)声明式绑定:使用简明移读的语法很容易地将模型(model)数据关联到dom元素上。
2)UI界面自动刷新:当宁的模型状态(model state)改变时, 您的UI将自动更新
3)依赖跟踪:为转变和联合数据, 在你的模型数据之间隐式建立关系
4)模板:为你的模型数据快速编写复杂的可嵌套的UI
官网:
https://knockoutjs.com/
https://github.com/knockout
使用案例:
https://knockoutjs.com/examples/
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, 所以绑定不到值
实例:
knockout的用法
用户名称:
用户密码:
邮箱地址:
用户住址:
商品名称:
<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>
数据双向绑定库