KnockoutJs快速入门教程资源-CSDN文库

6 浏览量 2021-01-19 15:16:40 上传评论收藏 78KB PDF 举报

资源推荐

资源详情

资源评论

KnockoutJs快速入门教程快速入门教程

一、引言一、引言

之前这个系列文章已经介绍Bootstrap，详情请查看本文：《Bootstrap入门教程》，由于最近项目中，前端是Asp.net MVC +

KnockoutJs + Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——

KnockoutJs。

二、二、KnockoutJs是什么？是什么？

做.NET开发的人应该都知道，WPF中就集成了MVVM框架，所以KnockoutJs也是针对Web开发的MVVM框架。关于MVVM好

处简单点来说就是——使得业务逻辑代码与页面展示代码分割开，使得前端项目更好维护。

之前，我们写Web页面的时候，JS代码和Html代码混合在一起，并且代码中充斥着大量的DOM对象的操作。这样代码结构非

常混乱。有了MVVM框架了，你可以将JS代码和Html代码分割开，并且数据操作部分更加简单，只需要通过相应的语法

（data-bind）绑定到对应的标签属性显示即可，从而加快开发速度。

KnockoutJs也就是这样一个MVVM框架。其实与其称其框架，更准备地应该是一个MVVM类库。因为它没有MVVM框架是一

个比较“重”的概念，其中应该包括路由等特性。而KnockoutJS中却没有，相比较，AngularJS应该称为一个MVVM框架更加合

适。

KnockoutJS主要实现的功能有以下主要实现的功能有以下4点：点：

声明式绑定（声明式绑定（Declarative Bindings）：）：使用简单的语法将模型数据关联到DOM元素上。即”data-bind”语法

依赖跟踪（依赖跟踪（Dependency Tracking）：）：为转变和联合数据，在模型数据之间建立关系。如商品总价是由各个商品项价格之

和。此时商品总价和商品项就可以使用依赖跟踪功能来建立关系。即由各个商品项的总价相加而得出。这种关系由

KnockoutJs中computed函数完成。

UI界面自动刷新界面自动刷新(Automatic UI Refresh)：：当你的模型状态改变时，UI界面的将自动更新。这点由observable函数完成。

模板模板(Templating)：：为您的模型数据快速编写复杂的可嵌套UI。和WPF中模板的概念类似。

接下来，我们通过具体的例子来让大家快速掌握KnockoutJs的使用。

三、声明式绑定三、声明式绑定

下面让我们看下如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中。

1.单向绑定单向绑定

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Demo1-单向绑定</title>

<script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>

</head>

<body>

<div>

<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>

<p>Last name: <input data-bind="value: lastName" /></p>

</div>

<script type="text/javascript">

function ViewModel() {

this.firstName = "Tommy";

this.lastName = "Li";

}

ko.applyBindings(new ViewModel());

</script>

</body>

</html>

2. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会

更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体

看看双向绑定的例子：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38574410

粉丝: 8
资源: 988

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip