3 天学会 knockout - 第 1 天

Pradeep Shet

4.95/5 (17投票s)

2014 年 8 月 20 日

CPOL

4分钟阅读

51348

685

分步学习 knockout 框架 - 第 1 天。

引言

如今，大多数 Web 应用程序都是通过最大程度的客户端脚本进行开发的，因为客户端编程语言和浏览器变得越来越强大。JQuery 库主要用于客户端脚本，因为它提供了更大的灵活性、易用性和可扩展性。

在 JQuery 的基础上，构建了一个新库，我们称之为 **knockout**。

**Knockout** 在当今 Web 应用程序开发领域被广泛使用。可以说，knockout 正在击败其他 JavaScript 框架，甚至对 Asp.Net 或 MVC 等 Web 服务器架构构成了严峻的竞争。因为使用 knockout，您可以只在客户端处理所有业务逻辑和验证，您需要的是可以通过任何面向服务的技术（如 webservice、WCF、REST Service、WebAPI 等）检索或获取的数据。

我将尝试分部分介绍 knockout 的所有主题。在这篇第 1 天的文章中，我将介绍 knockout 的基本概念。

议程

什么是 knockout.js？
为什么使用 Knockout.js？
关于 Observable 和 Binding 的演示示例

完成本文后，请继续阅读第 2 天的链接

第 2 天

什么是 knockout？

Knockout 是一个 JavaScript 库，它使我们能够开发丰富、交互式且响应式的数据驱动 UI。该库允许我们在 HTML 元素上进行声明式绑定，这意味着，当值更改时，UI 可以自动刷新，并且值可以反向反映到已绑定数据的元素上。

Knockout 主要基于 MV-VM（Model-View-ViewModel）架构模式。当我们谈论 MV-VM 时，会涉及三个组件。

**模型** – 它可以是一个实体或一组数据。这些数据可以用 JavaScript 对象表示。这些数据独立于任何 UI。

**视图** – 它是您的 UI 或一个展示数据的页面。可以是 aspx、html、php、asp。实际上，视图是代表 ViewModel 状态的 UI。

**ViewModel** – 它是模型和视图之间的中介。它聚合一个或多个模型，并借助绑定将模型信息转换为视图信息。实际上，ViewModel 会公开公共属性和方法，这些属性和方法通过声明式绑定替换视图中的模型值。

Knockout 主要用 KO 表示。

为什么使用 knockout？

Knockout 提供了各种优势——

UI 自动刷新，因为我们可以将 HTML 元素与模型进行强绑定。这也可以称为依赖跟踪。
声明式双向绑定 - 一种简单易用的语法，用于将 UI 与数据模型连接起来
可扩展以创建自定义绑定
与所有最新浏览器兼容。
轻松设计客户端-服务器架构，代码量最少。没有回发问题。
创建模板
无需基于模型更改进行条件 UI 刷新
由于它是一个 JavaScript 库，因此它可以与任何其他 Web 技术（如 Asp.Net、WCF、REST 服务、WebService、WebAPI 等）协同工作。
有助于构建单页应用程序（SPA）

演示示例

让我们从一个示例开始理解 knockout。

在开始编码之前，需要进行初始设置。

从以下链接下载 knockout.js 库 http://knockoutjs.com/downloads/index.html
在您的网页中添加 js 引用
script src="Scripts/knockout.js" type="text/javascript"></script>
从以下链接下载 jQuery 库 https://jqueryjs.cn/download/
在您的页面中添加 jQuery 的 js 引用。虽然没有 jQuery knockout 也可以执行，但没有 jQuery 库，knockout 就像是残缺不全的。
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>

设置完成！

让我们使用两个输入框来捕获员工的名字和姓氏，并在标签中显示名字。看看页面效果

使用 KO 创建一个 view model。这个模型可以是一个简单的 JavaScript 对象，并使用 ko.observable() 方法设置。这有助于模型跟踪其中的任何更改。
假设我们有两个 span，我们希望分别显示 FirstName 和 LastName。使用 data-bind 属性将模型与 DOM 元素绑定
激活 knockout 引擎以执行。

输出:

在这里，如果我更改文本框中的值，当焦点从文本框移除时，相同的值就会反映到 span 中。这是因为 span 与模型绑定，而模型是一个可观察对象，即更改会被观察或跟踪。
如果您想在按键时立即看到效果，请将属性设置为
```
<input type ="text" name="txtFName" data-bind="value: FirstName. valueUpdate='afterkeydown'" />
```