用Knockout.js创建动态UI

【 Web API教程】2.3.5 用Knockout.js创建动态UI注：本文是【 Web API系列教程】的一部分，如果您是第一次看本博客文章，请先看前面的内容。

Part 5: Creating a Dynamic UI with Knockout.js第5部分：用Knockout.js创建动态UI本文引自：/web-api/overview/creating-web-apis/using-web-api-with-entity-framework/using-web-api-with-entity-framework,-part-5 Creating a Dynamic UI with Knockout.js用Knockout.js创建动态UIIn this section, we'll use Knockout.js to add functionality to the Admin view.在本小节中，我们将用Knockout.js对Admin视图添加功能。

Knockout.js is a Javascript library that makes it easy to bind HTML controls to data. Knockout.js uses the Model-View-ViewModel (MVVM) pattern.Knockout.js是一个JavaScript库，它让HTML控件很容易与数据进行绑定。

Knockout.js使用的是“模型-视图-视图模型（MVVM）”模式。

∙The model is the server-side representation of the data in the business domain (in our case, products and orders).模型是事务域中数据的服务器端表示（在我们的示例中，是产品和订单）。

∙The view is the presentation layer (HTML).视图是表现层（HTML）。

∙The view-model is a Javascript object that holds the model data.The view-model is a code abstraction of the UI. It has no knowledge of the HTML representation. Instead, it represents abstractfeatures of the view, such as "a list of items".视图模型是保存了模型数据的一个JavaScript对象。

视图模型是UI的一种代码抽象。

它没有HTML表示方面的知识，但它表现了视图的抽象特性，如“列表项”。

The view is data-bound to the view-model. Updates to the view-model are automatically reflected in the view. The view-model also gets events from the view, such as button clicks, and performs operations on the model, such as creating an order.视图是与视图模型数据绑定的。

对视图模型的更新会自动地在视图得到反映。

视图模型也会获取视图的事件，如按钮点击，并在模型上执行操作（见图2-23）。

图2-23. 模型-视图-视图模型之间的关系First we'll define the view-model. After that, we will bind the HTML markup to the view-model.首先，我们要定义视图模型。

之后，要将HTML标记与视图模型进行绑定。

Add the following Razor section to Admin.cshtml:对Admin.cshtml添加以下Razor片段：@section Scripts {@Scripts.Render("~/bundles/jqueryval")<script type="text/javascript"src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script><script type="text/javascript">// View-model will go here// 视图模型会放在这儿</script>}You can add this section anywhere in the file. When the view is rendered, the section appears at the bottom of the HTML page, right before the closing </body> tag.可以把这个片断添加到文件的任何地方。

当视图被渲染时，这个片段会出现在HTML页面的底部，</body>关闭标签的前面。

All of the script for this page will go inside the script tag indicated by the comment:用于这个页面的所有脚本都被放在由以下注释所指示的script标签中：<script type="text/javascript">// View-model will go here// 视图模型会放在这儿</script>First, define a view-model class:首先，定义一个视图模型类：function ProductsViewModel() {var self = this;self.products = ko.observableArray();}ko.observableArray is a special kind of object in Knockout, called an observable. From the Knockout.js documentation: An observable is a “JavaScript object that can notify subscribers about changes.” When the contents of an observable change, the view is automatically updated to match.ko.observableArray是Knockout中的一种叫做observable的特殊对象（请将这种observable对象称为可见对象。

这种对象往往作为视图模型与视图进行交互，对视图而言，它是透明可见的，故称为可见对象。

在以下翻译中，都将这种observable对象称为可见对象—译者注）。

根据Knockout.js文档的描述：可见对象是一种“能够通知订户数据变化情况的JavaScript对象”。

当一个可见对象的内容发生变化时，视图会自动地进行匹配更新。

To populate the products array, make an AJAX request to the web API. Recall that we stored the base URI for the API in the view bag (see Part 4 of the tutorial).为了填充Products数组，需要形成一个发送到Web API的请求。

调回我们在视图包（View Bag）中存储的、用于此API的基URI（见本教程的第4部分）。

function ProductsViewModel() {var self = this;self.products = ko.observableArray();// New code// 新代码var baseUri = '@ViewBag.ApiUrl';$.getJSON(baseUri, self.products);}Next, add functions to the view-model to create, update, and delete products. These functions submit AJAX calls to the web API and use the results to update the view-model.下一步，对视图模型添加创建、更新以及删除产品的函数。

这些函数会对Web API 递交AJAX调用，并使用（所得到的）结果对视图模型进行更新。

function ProductsViewModel() {var self = this;self.products = ko.observableArray();var baseUri = '@ViewBag.ApiUrl';// New code// 新代码self.create = function (formElement) {// If the form data is valid, post the serialized form data to the web API.// 如果表单数据有效，把序列化的表单数据递交给Web API$(formElement).validate();if ($(formElement).valid()) {$.post(baseUri, $(formElement).serialize(), null, "json") .done(function (o) {// Add the new product to the view-model.// 将新产品添加到视图模型self.products.push(o);});}}self.update = function (product) {$.ajax({ type: "PUT", url: baseUri + '/' + product.Id, data: product });}self.remove = function (product) {// First remove from the server, then from the view-model.// 首先从服务器删除，然后从视图模型删除$.ajax({ type: "DELETE", url: baseUri + '/' + product.Id }) .done(function () { self.products.remove(product); });}$.getJSON(baseUri, self.products);}Now the most important part: When the DOM is fulled loaded, call the ko.applyBindings function and pass in a new instance of the ProductsViewModel:现在，最重要的部分：当DOM全部装载时，调用ko.applyBindings函数，并在其中传递一个新的ProductsViewModel实例：$(document).ready(function () {ko.applyBindings(new ProductsViewModel());})The ko.applyBindings method activates Knockout and wires up theview-model to the view.ko.applyBindings方法会激活Knockout，并将视图模型与视图连接起来。