注：本文是【ASP.NET Web API系列教程】的一部分，如果您是第一次看本博客文章，请先看前面的内容。
Part 5: Creating a Dynamic UI with Knockout.js第5部分：用Knockout.js创建动态UI
本文引自：,-part-5
Creating a Dynamic UI with Knockout.js用Knockout.js创建动态UI
In 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 abstract features 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="http://www.mamicode.com/@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);
}