knockoutJS 快速上手

翻译：Knockout 快速上手 - 3: knockoutJS 快速上手

许多时候，学会一种技术的有效方式就是使用它解决实际中的问题。在这一节，我们将学习使用 Knockout 来创建一个常见的应用，库存管理应用。

应用概览

在创建我们的应用之前，我们需要一个公司，来理解应用解决的问题。我们的应用将能够完成下列任务：

浏览公司销售的每种产品，跟踪 SKU 数量和说明。
对每种产品的价格，费用和数量进行赋值。
当公司决定销售某种新产品的时候，可以创建新的产品。
当公司停售某种产品的时候，可以删除这种产品。

第一步定义命名空间

在我们实际开始开发应用之前，很重要的一个问题就是规划我们如何组织我们的程序，将我们应用的代码与浏览器界面和本地函数进行分离。你可能奇怪对于这么小的应用我们为什么要这么做。对于 JavaScript 应用的最佳实践来说，这么做无论如何都是非常重要的。通过命名空间，即使对于一个很小的应用来说，在以后随着应用的不断扩展，也可以确保容易进行维护，并且与第三方的组件进行分隔。( 例如许多的脚本插件 )

我们将在前面创建的 app.js 中定义我们的命名空间。下面代码就是定义定名空间的代码。

// Define the namespace

window.myApp = {};

第二步创建模型

我们创建的第一个模型将用来表示我们的产品对象。我们通过创建一个名为 Product.js 的文件来完成这个任务。文件的内容如下所示。

(function (myApp) {

// Product Constructor Function

function Product() {

var self = this;

// "SKU" property

self.sku = ko.observable("");

// "Description" property

self.description = ko.observable("");

// "Price" property

self.price = ko.observable(0.00);

// "Cost" property

self.cost = ko.observable(0.00);

// "Quantity" property

self.quantity = ko.observable(0);

}

// add to our namespace

myApp.Product = Product;

}(window.myApp));

在这段代码中，我们定义了一个函数作为 Product 的构造器。如你所见，我们将这个函数定义在一个称为立即执行的函数表达式中 ( IIFE )。我们为了如下的原因使用这个模式：

这使得我们定义了一个 JavaScript 的作用域，防止污染全局命名空间 ( 像 window 和 document 所处的命名空间 )。这使得我们在调试的时候，不会在本地的函数，比如 windows 中看到和使用我们定义的 Product 函数。
这使得我们可以创建私有的函数，在其他的代码中禁止访问。如果我们定义了 Product 函数之后，没有将它添加到 myApp 命名空间中，就没有代码可以在 IIFE 之外访问我们的 Product 构造器。这在创建复杂逻辑的时候非常理想，在某种程度上可以防止其它的对象访问和重写我们的逻辑。

在构造器函数内部，每个属性都创建在 self 对象之上。self 对象是一个指向新创建的 Product 对象的引用。在 JavaScript 中，this 是一个关键字，但是程序员经常被它不同的含义所困惑。这使由于它可以表示多种不同的对象 ( 比如调用对象，全局对象等等 )。为了防止这个问题，我们创建一个局部变量 self ，这样，我们就可以确信它总是表示我们当前的对象实例。

最后，每个属性的值被赋予一个 Knockout 的 Observable 实例。Observable 是 Knockout 中创建可以在属性发生变化的时候触发事件的属性的简单方式 ( 这是 Knockout 中的一个核心概念，我们在后继内容中还要深入讨论 )。通过将属性的初始值传递给这个函数，我们得到一个包装了初始值的函数返回值。可以通过调用这个包装函数来为属性赋值和取值。下面的实例演示了如何使用我们的构造器和属性。

// Usage

// create an instance of the Product class

var productA = new myApp.Product();

// "set" the 'sku' property

productA.sku('12345')

// "get" the 'sku' property value

var skuNumber = productA.sku();

第三步创建模型使用的视图

现在，我们已经定义了我们的模型类。我们需要创建一个视图在屏幕上显示模型，以便用户可以看到我们的产品数据。我们将使用 HTML 来创建这个视图。我们将使用很简单的布局来显示产品的信息。

<p>

SKU: <span data-bind="text: sku"></span>

</p>

<p>

Description: <span data-bind="text: description"></span>

</p>

<p>

Cost: <span data-bind="text: cost"></span>

</p>

<p>

Price: <span data-bind="text: price"></span>

</p>

<p>

Quantity: <span data-bind="text: quantity"></span>

</p>

</div>

这里，我们使用 Knockout 的 text 绑定来显示产品的信息。text 绑定将属性的值转化为 string 之后，设置 HTML 元素的 innerText 属性 ( 通常使用 span 元素 )。

第四步创建 ViewModel 管理模型

这里，我们将会需要创建业务逻辑，来处理创建产品，删除产品来管理我们的产品列表。我们还需要某种数组来来管理我们的产品列表。因此，我们将建新的类来实现所有的功能、数组、对象以便绑定到用户界面上。我们需要的类就是 ViewModel.

像我们现在创建应用一样，刚开始的 ViewModel 我们仅仅定义一个属性 selectedProduct。这个属性表示我们当前显示在屏幕上进行处理的单个产品，在 js 文件夹中添加一个名为 ProductsViewModel.js 的脚本文件，在其中添加如下代码。

// Products ViewModel

(function (myApp) {

// constructor function

function ProductsViewModel() {

var self = this;

// the product that we want to view/edit

self.selectedProduct = ko.observable();

}

// add our ViewModel to the public namespace

myApp.ProductsViewModel = ProductsViewModel;

}(window.myApp));

第五步使用 Observable 数组

我们公司的业务需要销售多种产品，所以，我们需要保持一个当前产品的列表。在 JavaScript 中，管理和维护一个对象集合的数据结构就是数组。Knockout 更进一步，提供了一个名为 ObservableArray 的对象。后面我会进一步讨论这个对象，这个对象在成员发生变化的时候，会抛出相应的事件通知，这就允许 Knockout 可以在 ObservableArray 发生变化的时候保持用户界面和我们数据结构的同步。

Knockout 的 ObservableArray 与标准的 JavaScript 数组拥有相同的使用方式，包括 ( push, pop, slice, splice ) 等等。所以，如果你使用过 JavaScript 的 Array 话，使用起来非常自然和流畅。

为了创建公司产品的主列表，为们需要为我们的视图模型添加一个新的属性 productCollection 。

// the product that we want to view/edit

self.selectedProduct = ko.observable();

// the product collection

self.productCollection = ko.observableArray([]);

第六步从 ObservableArray 中添加和删除模型

现在，我们已经拥有了一个公司所有产品的列表，下面我们实现向这个列表添加产品和删除产品的逻辑。

添加产品的逻辑仍然比较简单，可以在这个过程中添加一些验证和检查。但是尽可能地简单和清楚。

// creates a new product and sets it up

// for editing

self.addNewProduct = function () {

// create a new instance of a Product

var p = new myApp.Product();

// set the selected Product to our new instance

self.selectedProduct(p);

};

// logic that is called whenever a user is done editing

// a product or done adding a product

self.doneEditingProduct = function () {

// get a reference to our currently selected product

var p = self.selectedProduct();

// ignore if it is null

if (!p) {

return;

}

// check to see that the product

// doesn't already exist in our list

if (self.productCollection.indexOf(p) > -1) {

self.selectedProduct(null);

return;

}

// add the product to the collection

self.productCollection.push(p);

// clear out the selected product

self.selectedProduct(null);

};

在这些代码中，我们计划在用户添加新的产品调用addNewProduct 的时候，使用新创建的 Product 对象填充我们当前选中的对象selectedProduct，然后可以开始进行编辑。在用户完成编辑之后，调用doneEditingProduct 的时候，注意需要检查selectedProduct 是否为空，不为空的话，将这个对象添加到产品列表中。

删除产品的逻辑更加简单一些，我们直接检查selectedProduct 是否为空，如果不为空，就直接从列表中删除它。

// logic that removes the selected product

// from the collection

self.removeProduct = function () {

// get a reference to our currently selected product

var p = self.selectedProduct();

// ignore if it is null

if (!p) {

return;

}

// empty the selectedProduct

self.selectedProduct(null);

// simply remove the item from the collection

return self.productCollection.remove(p);

};

最后，在用户界面上，我们需要提供一些按钮，用户可以通过它们调用这些业务逻辑。我们添加按钮，绑定按钮的 click 事件到视图模型的相关属性上，如下所示：

<p>

SKU: <span data-bind="text: sku"></span>

</p>

<p>

Description: <span data-bind="text: description"></span>

</p>

<p>

Cost: <span data-bind="text: cost"></span>

</p>

<p>

Price: <span data-bind="text: price"></span>

</p>

<p>

Quantity: <span data-bind="text: quantity"></span>

</p>

</div>

<button type="button" data-bind="click: removeProduct">Remove</button>

</div>

第七步编辑模型的属性

到现在为止，我们仍然没有办法编辑产品列表中每个产品的属性。所以，需要修改我们的视图以便实现双向的绑定。Knockout 的 value 绑定可以帮助我们实现这个目的，但是只能在 input 元素上使用这个绑定。下面我们修改一下我们的视图，如下所示：

<form>

<legend>Product Details</legend>

<label>

SKU:

</label>

<br />

<label>

Description:

</label>

<br />

<label>

Cost:

</label>

<br />

<label>

Price:

</label>

<br />

<label>

Quantity:

</label>

</fieldset>

</form>

</div>

现在，我们基于表单的视图可以支持编辑产品的属性了。我将会提到这一点，我们需要添加一些输入的验证来保证 Cost 和 Price 中提供了正确的金额，还有Quantity 中是正确的整数。实际上这些问题有些超出了本教程的范围，在互联网上你可以找到很多实现这些功能的脚本库。

第八步创建主从视图

终于，我们已经创建了管理数据的逻辑，以及通过 HTML 提供了一个非常友好的用户界面，实现了管理公司产品的功能。让我们继续前进，为用户创建一个好用的主从界面视图。

首先，我们需要确认产品视图正确绑定在我们选定的产品上，而且，产品视图只有在选中产品实例之后，才会显示出来。Knockout 提供了一个称为 with 的绑定来实现这些功能。后面我们会详细讨论这些问题。但是 with 绑定不仅提供选中产品的 null 检测，还实现了将绑定的上下文从 ProductViewModel 切换到 selectedProduct ( 这样我们就可以在数据绑定的语法中直接引用这些属性 )。

由于只有在我们选中一个产品的时候，Remove 和 Done 按钮才是可见的，我们将为这两个按钮添加一个 visible 绑定，用来检查 selectedProduct 属性是否已经有值。也可以为 Add 按钮做类似的工作，完成这些功能的代码如下所示。

<button type="button"

data-bind="click: addNewProduct, visible: (selectedProduct() ? false : true)">Add</button>

<button type="button"

data-bind="click: removeProduct, visible: (selectedProduct() ? true : false)">Remove</button>

<button type="button"

data-bind="click: doneEditingProduct, visible: (selectedProduct() ? true : false)">Done</button>

</div>

最后，我们还需要提供一个显示产品列表的视图来方便用户管理产品。通常是一个表格，列表等等。或者一些控件来实现这些功能。Knockout 足够强大，我们可以直接使用原始的 HTML 来显示产品列表 ProductCollection。

我们使用基本的 select 元素来实现基本的列表。Knockout 提供了一个 options绑定，支持我们将一个 ObservableArray 绑定到 select 元素。我们还将会提供第二个 Observable 绑定来保持视图中选中的产品。为了达到这个目的，我们在 select 元素中使用 value 绑定来绑定到选中的项目，在视图模型中，我们增加一个新的绑定属性listViewSelectedItem,，下面的代码演示了新建的属性。属性后面的 subscription 用来传递这个属性的任何变化到我们的selectedProduct 属性中。

// the product that we want to view/edit

self.selectedProduct = ko.observable();

// the product collection

self.productCollection = ko.observableArray([]);

// product list view selected item

self.listViewSelectedItem = ko.observable(null);

// push any changes in the list view to our

// main selectedProduct

self.listViewSelectedItem.subscribe(function (product) {

if (product) {

self.selectedProduct(product);

}

});

我们的列表视图实现如下所示：

<select id="productList" size="10" style="min-width: 120px;"

data-bind="options: productCollection, value: listViewSelectedItem, optionsText: 'sku'">

</select>

</div>

在前面代码中，使用了optionsText 绑定来绑定 ObservableArray 中每个元素的属性，开始的时候，我们设置 Product 的 sku 属性，但是我们如何能够同时看到 sku 属性和 description 属性的值呢？我们可以通过 Computed Observable 来实现，很快我们就会讨论这个特性，现在，我们在 Product 类中添加一个计算出 sku 属性和 description 属性的新属性。

// Computed Observables

// simply combines the Sku and Description properties

self.skuAndDescription = ko.computed(function () {

var sku = self.sku() || "";

var description = self.description() || "";

return sku + ": " + description;

});

在添加了skuAndDescription 属性之后，应该更新一下产品列表视图，可以将optionsText 属性的值重新设置为skuAndDescription 来代替原来的 sku。

第九步应用绑定

为了让我们的应用能够实际运行，我们需要启动 Knockout 的绑定处理，我们需要确认在所有的脚本正确加载之后，在 ViewModel 初始化之后，执行绑定处理过程。我建议的方式是在 app.js 中如下处理。

// Define the namespace

window.myApp = {};

(function (myApp) {

// constructor functio for App

function App() {

// core logic to run when all

// dependencies are loaded

this.run = function () {

// create an instance of our ViewModel

var vm = new myApp.ProductsViewModel();

// tell Knockout to process our bindings

ko.applyBindings(vm);

}

// make sure its public

myApp.App = App;

}(window.myApp));

在 app.js 中创建了初始化逻辑之后，我们需要创建 app 的实例，然后调用 run 方法，在页面最后的位置添加如下的代码。

var app = new myApp.App();

app.run();

</script>

为了教学的目的，我将这段代码放在页面几乎最后的位置，我们还有其他的方式可以使用，比如通过 jQuery 的 ready 函数来执行。

全套精彩 .NET 学习视频，尽在思胜

分类: javascript