优秀的编程知识分享平台

网站首页 > 技术文章 正文

数据双向绑定库——knockout.js

nanyue 2025-01-02 18:10:14 技术文章 3 ℃

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, 所以绑定不到值

实例:

<!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>
数据双向绑定库

Tags：

猜你喜欢

最近发表
标签列表