Knockout 绑定列表

      上一个章节我们说到Knockout能够很方便地做数据绑定，也提供了一些实例。在通常的开发过程中，最常见的数据操作就是列表。今天写了一个例子来说明Knockout是如何做列表的数据绑定的。

1.控制器

private static List<Contact> contacts = new List<Contact>
{
     new Contact{Id = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo="123"},
     new Contact{Id = "002", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", PhoneNo="456"},
     new Contact{Id = "003", FirstName = "Wu", LastName = "Wang", EmailAddress = "wangwu@gmail.com", PhoneNo="789"}
};

public ActionResult GetAllContacts()
{
      return Json(new { Data = contacts.ToArray() }, JsonRequestBehavior.AllowGet);
}

2.页面

页面里面分为两部分，一部分是DOM对象，一部分是JS。DOM对象几乎是原生的HTML（只是增加了一个data-bind属性）

<table border="1">
    <thead>
        <tr data-bind="foreach:headers">
            <th><a data-bind="text:displayText"></a></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: records">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: EmailAddress"></td>
            <td data-bind="text: PhoneNo"></td>
        </tr>
    </tbody>
</table>

注意到，这里面有一个foreach关键字，这里的foreach的意义和我们再c#中使用的意义相同。

在JS中，我们首先创建模型，然后创建数据对象（为了演示实际项目中的情形，我们采用ajax的方式从后台获取数据）

<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            title: "Knockout Demo",
            headers: [
                { displayText: "First Name", value: "FirstName", width: "auto" },
                { displayText: "Last Name", value: "LastName", width: "auto" },
                { displayText: "Email Address", value: "EmailAddress", width: "auto" },
                { displayText: "Phone No.", value: "PhoneNo", width: "auto" }
            ],
            defaultOrderBy: "FirstName"
        };

        function Init(data) {
            function ViewModel(options) {
                var me = this;
                me.headers = ko.observableArray(options.headers);
                me.records = ko.observableArray(data);
            };

            var viewModel = new ViewModel(options);
            ko.applyBindings(viewModel);
        }

        $.ajax(
        {
            url: "/Home/GetAllContacts",
            type: "GET",
            success: function (result) {
                Init(result.Data);
            }
        });

    });
</script>

在从后台成功获得数据之后，我们创建数据对象，并绑定数据到DOM对象，为了让样式更好看，我们调整了字体！

<style type="text/css">
    table {
        font-family : 微软雅黑,宋体, 'New York';
    }
</style>

页面整体代码如下：

@{
    ViewBag.Title = "Home Page";
}

<style type="text/css">
    table {
        font-family : 微软雅黑,宋体, 'New York';
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            title: "Knockout Demo",
            headers: [
                { displayText: "First Name", value: "FirstName", width: "auto" },
                { displayText: "Last Name", value: "LastName", width: "auto" },
                { displayText: "Email Address", value: "EmailAddress", width: "auto" },
                { displayText: "Phone No.", value: "PhoneNo", width: "auto" }
            ],
            defaultOrderBy: "FirstName"
        };

        function Init(data) {
            function ViewModel(options) {
                var me = this;
                me.headers = ko.observableArray(options.headers);
                me.records = ko.observableArray(data);
            };

            var viewModel = new ViewModel(options);
            ko.applyBindings(viewModel);
        }

        $.ajax(
        {
            url: "/Home/GetAllContacts",
            type: "GET",
            success: function (result) {
                Init(result.Data);
            }
        });

    });
</script>

<table border="1">
    <thead>
        <tr data-bind="foreach:headers">
            <th><a data-bind="text:displayText"></a></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: records">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: EmailAddress"></td>
            <td data-bind="text: PhoneNo"></td>
        </tr>
    </tbody>
</table>

整个效果如下：

开发环境:vs2013+knockout3.0+chrome
源代码下载：http://download.csdn.net/detail/afandaafandaafanda/8544779