【Web API系列教程】3.6 — 实战:处理数据(创建JavaScript客户端)

在本节,你将使用HTML、JavaScript和Knockout.js库为应用程序创建客户端。我们将按如下步骤建立客户端应用:
1, 展示books列表
2, 展示book详细信息
3, 添加一本新书

Knockout.js库使用了模型-视图-视图模型(MVVM)模式:
1, 模型是在业务域(在本例中是books和authors)中数据在服务器端的表现形式。
2, 视图是表示层(HTML)。
3, 视图模型是维持模型的JavaScript对象。视图模型是UI的代码抽象。它不具备HTML表现形式,相反,它表示抽象特征的视图,例如”书籍列表“。

视图被数据绑定到视图模型。视图模型的更新将自动反映在视图中。视图模型也从视图中获取事件,比如按钮的点击。

【Web API系列教程】3.6 — 实战:处理数据(创建JavaScript客户端)

这个实现使得在你的app中修改布局和UI更加容易,因为你可以改变这些绑定而无须任何代码。例如,你可能以ul的方式展示一个项列表,那么可以将其改变成表。

添加Knockout库

在Visual Studio中,点击Tools目录,选择Library Package Manager。然后选择Package Manager Console。在Package Manager Console窗口,输入以下命令:

Install-Package knockoutjs

这条命令将Knockout文件添加到Scripts文件夹下。

创建视图模型

在Scripts文件夹下添加一个名为app.js的JavaScript文件。(在Solution Explorer中,右击Scripts文件夹,选择Add,然后选择JavaScript File。)粘贴以下代码:

var ViewModel = function () {
    var self = this;
    self.books = ko.observableArray();
    self.error = ko.observable();

    var booksUri = '/api/books/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllBooks() {
        ajaxHelper(booksUri, 'GET').done(function (data) {
            self.books(data);
        });
    }

    // Fetch the initial data.
    getAllBooks();
};

ko.applyBindings(new ViewModel());

在Knockout中,observable类启用了数据绑定。当observable的内容改变时,observable会通知所有的数据绑定控制器,所以它们能够去更新它们自身。(而observable类是一个observable的数组版本。)以此开始,我们的视图模型有了两个observable:
1, books维持books列表。
2, error包含如果AJAX调用失败时的错误信息

该getAllbooks方法产生AJAX调用以得到books列表。然后将其结果添加到books数组中。

而ko.applyBinding方法是Knockout库的一部分。它使用视图模型作为一个参数并建立数据绑定。

添加Script Bundle

Bundle是一个在ASP.NET 4.5中出现的新特性,它使得组合或包装多个文件进一个文件更加容易。Bundle减少了向服务器的请求,而这恰能改进页面加载时间。

打开App_Start文件夹下的BundleConfig.cs文件,添加如下代码到RegisterBundles方法。

public static void RegisterBundles(BundleCollection bundles)
{
    // ...

    // New code:
    bundles.Add(new ScriptBundle("~/bundles/app").Include(
              "~/Scripts/knockout-{version}.js",
              "~/Scripts/app.js"));
}
上一篇:在苹果MAC OS X Lion系统上使用Outlook for MAC 2011配置Exchange邮箱


下一篇:冬季实战营第四期:零基础容器技术实战 学习报告