利用Knockout.js构建动态Web应用：实例与深度解析

需积分: 9 112 浏览量更新于2024-07-22 1 收藏 2.82MB PDF 举报

"Knockout.js.2014.12.pdf" 是一本面向开发者的实用指南，专为提升动态客户端Web应用程序的设计与构建能力而编写。本书由Jamie Munro撰写，深入探讨了Knockout.js框架，这是一种轻量级的JavaScript库，采用了Model-View-ViewModel (MVVM) 设计模式，旨在创建响应迅速且易于维护的应用。该书的核心内容围绕Knockout.js的功能和优势展开，通过丰富的实例和详尽的解释，让读者能够理解和掌握如何利用此框架来构建数据绑定、开发可重用的函数，以及与服务器协作，实现客户端应用的数据持久化。作者的经验分享和推荐在书中也起到了关键作用，这些都是基于他在实际构建Web应用过程中学到的宝贵教训。书中特别强调了Knockout.js在设计时的易用性和灵活性，它能帮助开发者打造高度交互式的用户体验。通过一系列实践项目，如章节中的购物车示例，读者可以亲眼见证如何将所有这些技术元素整合到实际应用场景中，从而全面了解并掌握如何设计和构建高效、功能强大的客户端应用程序。对于希望提升Web开发技能，尤其是对MVVM架构感兴趣的开发者来说，这本书是一份不可多得的资源。它不仅提供了技术知识，还包含了一定的实战指导，有助于读者在实践中快速成长。无论是初学者还是有经验的开发者，都能从中受益匪浅，提升自己的Web开发水平。

Example 1-1. Knockout bindings using HTML comments

Binding through HTML comments is extremely convenient when you want to wrap

your binding around a block of HTML code, or you do not want to create an extra

HTML object for the sole purpose of housing a data binding.

Data Binding Example

One of the most common things that Knockout is used for is to dynamically display

text or HTML based on data contained within a ViewModel.

Example 1-2 shows creating a header that will display the name property within the

ViewModel.

Example 1-2. Data binding text

<!DOCTYPE html>

<html>

<head>

<title>Data Binding with KnockoutJS</title>

</head>

<body>

<h1>Hello <span data-bind="text: name"></span></h1>

var viewModel = function() {

this.name = 'Steve Kennedy';

};

ko.applyBindings(viewModel);

</script>

</body>

</html>

When this example is executed in a browser, it outputs Hello Steve Kennedy inside

an h1 tag.

A span tag is data-bound to the name property of the ViewModel. This is done by

placing text: name inside the data-bind HTML attribute.

As mentioned in the introduction to this chapter, implementing Knockout requires

three distinct things. The first is the view, which in this example is the HTML that

contains the h1 and span tags that identify the data binding.

2 | Chapter 1: Getting Started with KnockoutJS

The second is the ViewModel, which in this example is the JavaScript variable/func‐

tion called viewModel that contains a single variable name.

The third is telling Knockout to perform the data binding of the view and the View‐

Model. This is accomplished by calling the ko.applyBindings function with a View‐

Model.

When this function is executed, Knockout processes both the view and the

ViewModel. All data bindings in the view are executed and dynamically replaced with

the data from the ViewModel.

Knockout does not limit you to a single ViewModel per view. Large projects or classes

that are well designed for reusability are common reasons to bind multiple

ViewModels to a single view. This is discussed in more detail in Chapter 6.

What Is MVVM

The Model-View-ViewModel (MVVM) design pattern is based largely on the Model-

View-Controller (MVC) pattern. In fact, the MV is shared between them. It’s the

ViewModel that really separates the two.

MVVM was designed to implement data binding between your ViewModel and your

View. This is what KnockoutJS does for us and does very well. It is accomplished

using some simple-to-implement HTML attributes and a JavaScript ViewModel as

shown in Example 1-2.

The most important thing to remember when you are building ViewModels is that

they should be organized to make it easy to represent how your View uses the data.

We explore several common scenarios in the upcoming examples.

Creating a ViewModel

A ViewModel can be any type of JavaScript variable. In Example 1-3, let’s start with a

simple JavaScript structure that contains a single property called name.

Example 1-3. Basic ViewModel

var myFirstViewModel = {

name: 'Steve Kennedy'

};

The previous example is a perfect scenario of a ViewModel that might not correlate

100% to a data model. Frequently, a data model separates the first and last name into

two separate fields to make editing the data easier. However, in a view, it makes more

sense to concatenate them into a single field for display.

What Is MVVM | 3

剩余100页未读，继续阅读

xinconan2

粉丝: 269
资源: 399

利用Knockout.js构建动态Web应用：实例与深度解析

Knockout js 基礎入門教學

BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查

Knockout应用开发指南PDF经典高清版

Web App Testing Using Knockout.JS(PACKT,2014)

knockout.js---jquery.mobile.js-using-shim:Knockout.js + jquery.mobile.js

Knockout.js.test:Knockout.js（列表和集合）测试

Knockout.WinJS:在 WinJS 中启用 Knockout.js 的酷功能

hapi-knockout:Knockout.js 和 hapi.js 示例

JavaScript的UI库 Knockout.js.zip

Knockout.js Succinctly

最新资源