深入解析knockout.js：构建动态用户界面的秘密武器

2星需积分: 10 82 浏览量更新于2024-07-24 收藏 827KB PDF 举报

"本文将深入探讨Knockout.js，一个用于创建动态响应用户界面的JavaScript库，特别适合在ASP.NET MVC框架中使用。它通过MVVM（Model-View-ViewModel）模式，使得数据模型和视图之间的绑定变得更加简单和可维护。主要特性包括优雅的依赖追踪、声明式绑定和易于扩展的自定义行为。Knockout.js是一个纯JavaScript库，与任何服务器或客户端技术兼容，可以无缝添加到现有应用中，并且体积小巧，gzip压缩后仅13kb，支持所有主流浏览器。" **1. Knockout.js基本概念** Knockout.js是一个轻量级的JavaScript库，它引入了MVVM（Model-View-ViewModel）设计模式，帮助开发者创建富交互性和响应式的前端界面。在MVVM架构中，Model代表数据模型，ViewModel是连接Model和View的桥梁，而View则是用户看到和交互的部分。当Model发生变化时，ViewModel会自动更新，进而触发View的更新，反之亦然。 **2. 依赖追踪机制** 依赖追踪是Knockout.js的核心特性之一，它能自动检测数据模型的变化，并实时更新相关的UI元素。当数据模型中的某个属性改变时，与其绑定的所有UI部分都会自动更新，无需手动操作，从而降低了代码的复杂性和出错率。 **3. 声明式绑定** 声明式绑定是Knockout.js另一个强大的功能，它允许开发者用一种直观的方式来连接UI元素和数据模型。通过简单的语法，可以在HTML标记中直接声明UI元素与模型之间的关系，如`data-bind`属性。这使得创建复杂的动态UI变得简单，同时保持了代码的可读性。 **4. 自定义行为和扩展** Knockout.js提供了一个易于扩展的框架，开发者可以通过创建新的声明式绑定来实现自定义行为。只需几行代码，就可以定义一个新的绑定，用于处理特定的业务逻辑或用户交互，然后在整个应用中重复使用。 **5. 兼容性和性能** 作为纯JavaScript库，Knockout.js可以与任何服务器端或客户端技术配合使用，无论你是使用ASP.NET MVC还是其他框架。同时，它的文件大小经过gzip压缩后只有大约13kb，对页面加载速度的影响很小。Knockout.js还支持所有主流的现代浏览器，包括Internet Explorer 6+，确保了广泛的应用场景。 **6. 无缝集成** 在ASP.NET MVC项目中，Knockout.js可以方便地与视图模型一起工作，提供动态的数据绑定和页面更新。即使你的应用已经有了大量的静态HTML，也可以轻松地添加Knockout.js，而不必对现有架构进行大规模改动。总结起来，Knockout.js是一个高效、灵活且易于上手的JavaScript库，它简化了前端动态界面的开发，让数据模型和视图的同步变得更加自动化和可靠。无论你是新手还是经验丰富的开发者，都能从中受益。

Part II: Observables

preceding example demonstrates a more general mechanism for filtering and validating with custom logic

to control what kind of user feedback appears, which may be of use if your scenario is more complex than

jQuery Validation handles natively.

How dependency tracking works

Beginners don’t need to know about this, but more advanced developers will want to know why I keep

making all these claims about KO automatically tracking dependencies and updating the right parts of the

UI…

It’s actually very simple and rather lovely. The tracking algorithm goes like this:

 Whenever you declare a computed observable, KO immediately invokes its evaluator function to

get its initial value.

 While your evaluator function is running, KO keeps a log of any observables (or computed

observables) that your evaluator reads the value of.

 When your evaluator is finished, KO sets up subscriptions to each of the observables (or

computed observables) that you’ve touched. The subscription callback is set to cause your

evaluator to run again, looping the whole process back to step 1 (disposing of any old

subscriptions that no longer apply).

 KO notifies any subscribers about the new value of your computed observable.

So, KO doesn’t just detect your dependencies the first time your evaluator runs - it redetects them every

time. This means, for example, that your dependencies can vary dynamically: dependency A could

determine whether you also depend on B or C. Then, you’ll only be re-evaluated when either A or your

current choice of B or C changes. You don’t have to declare dependencies: they’re inferred at runtime

from the code’s execution.

The other neat trick is that declarative bindings are simply implemented as computed observables. So, if a

binding reads the value of an observable, that binding becomes dependent on that observable, which

causes that binding to be re-evaluated if the observable changes.

Note: Why circular dependencies aren’t meaningful

Computed observables are supposed to map a set of observable inputs into a single observable output. As

such, it doesn’t make sense to include cycles in your dependency chains. Cycles would not be analogous

to recursion; they would be analogous to having two spreadsheet cells that are computed as functions of

each other. It would lead to an infinite evaluation loop.

Part II: Observables

So what does Knockout do if you have got a cycle in your dependency graph? It avoids infinite loops by

enforcing the following rule: a computed observable cannot trigger its own re-evaluation. This is very

unlikely to affect your code. It’s relevant only if you have a ko.computed (call it A) whose evaluator writes

to another observable (call it B) that (directly or via a dependency chain) affects the value of A. In that

case, KO will not restart evaluation of A while it is already evaluating, so the resulting value of A will

respect only the original value of B, ignoring any update made to B while A’s evaluator is running.

Determining if a property is a computed observable

In some scenarios, it is useful to programmatically determine if you are dealing with a computed

observable. Knockout provides a utility function, ko.isComputed to help with this situation. For example,

you might want to exclude computed observables from data that you are sending back to the server.

for (var prop in myObject) {

if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {

result[prop] = myObject[prop];

}

Additionally, Knockout provides similar functions that can operate on observables and computed

observables:

 ko.isObservable - returns true for observables, observableArrays, and all computed observables.

 ko.isWriteableObservable - returns true for observable, observableArrays, and writeable

computed observables.

What happened to dependent observables?

Prior to Knockout 2.0, computed observables were known as dependent observables. With version 2.0, we

decided to rename ko.dependentObservable to ko.computed because it is easier to explain, say, and type.

But don’t worry: this won’t break any existing code. At runtime, ko.dependentObservable refers to the

same function instance as ko.computed — the two are equivalent.

3. Working with observable arrays

If you want to detect and respond to changes on one object, you’d use observables. If you want to detect

and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios

where you’re displaying or editing multiple values and need repeated sections of UI to appear and

disappear as items are added and removed.

剩余73页未读，继续阅读

Alexander_Chenxingpa

粉丝: 0
资源: 2

深入解析knockout.js：构建动态用户界面的秘密武器

mvc+knockout.js联动

d3-knockout-demo:如何在knockout.js 中使用带有自定义绑定的d3.js 的演示

前端项目-knockout-validation.zip

Knockout.js入门与优势详解

Knockout-BindingHandlers:Knockout.js 的一些库绑定处理程序

用模版生成HTML的的框架jquery.tmpl使用详解

Vue.js的模板语法详解

KoBlockedSpin:展示如何在 Knockout 绑定中使用 Spin.js 和 JQuery BlockedUI 的示例项目

Knockout数组(observable)使用详解示例

MVVM模式下的轻量级UI库：Knockout应用开发详解

最新资源