用Knockoutjs创建动态UI.docxVIP

 HYPERLINK /r01cn/archive/2012/11/15/2771264.html 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI 注：本文是【 HYPERLINK /r01cn/archive/2012/11/11/2765432.html ASP.NET 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创建动态UI In this section, well use Knockout.js to add functionality to the Admin view.在本小节中，我们将用Knockout.js对Admin视图添加功能。  HYPERLINK / 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. HYPERLINK / 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 well 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.Cont