翻译：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 来创建这个视图。我们将使用很简单的布局来显示产品的信息。

<div id="productView">     <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 事件到视图模型的相关属性上，如下所示：

<div id="content">     <div id="productView" data-bind="with: selectedProduct">         <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>     <div id="buttonContainer">         <button type="button" data-bind="click: addNewProduct">Add</button>         <button type="button" data-bind="click: removeProduct">Remove</button>         <button type="button" data-bind="click: doneEditingProduct">Done</button>     </div> </div>

 

第七步 编辑模型的属性

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

<div id="productView">     <form>         <fieldset>             <legend>Product Details</legend>             <label>                 SKU:                 <input type="text" data-bind="value: sku" />             </label>             <br />             <label>                 Description:                 <input type="text" data-bind="value: description" />             </label>             <br />             <label>                 Cost:                 <input type="text" data-bind="value: cost" />             </label>             <br />             <label>                 Price:                 <input type="text" data-bind="value: price" />               </label>             <br />             <label>                 Quantity:                 <input type="text" data-bind="value: quantity" />             </label>         </fieldset>     </form> </div>

 

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

第八步 创建主从视图

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

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

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

<div id="buttonContainer">     <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);     } });

 

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

<div id="productListView">     <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 方法，在页面最后的位置添加如下的代码。

<script type="text/javascript">     var app = new myApp.App();     app.run(); </script>

 

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