在ASP.NET MVC中使用Knockout实践08，使用foreach绑定集合

本篇体验使用 foreach 绑定一个Product集合。

 

首先使用构造创建一个View Model。

        var Product = function(data) {

            this.name = ko.observable(data.name);

            this.category = ko.observable(data.category);

        };

由于是从服务端返回json数据，待会服务端返回Products集合的时候，可以构建一个key为name和category的json格式。

 

而foreach需要绑定的是集合，我们还需要创建一个View Model，该View Model有一个集合属性。

        var RealVM = function(products) {

            var productsArr = [];

            for (var i = 0; i < products.length; i++) {

                var product = new Product(products[i]);

                productsArr.push(product);

            }

            this.products = ko.observableArray(productsArr);

        };   

接着，向服务端发送异步请求，返回的Prduct集合作为RealVM构造函数的实参。

            $.getJSON('@Url.Action("GetProducts","Home")', function(data) {

                var vm = new RealVM(data);

                ko.applyBindings(vm);

            });    

前端完整代码如下：

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<table>

    <thead>

        <tr>

            <th>名称</th>

            <th>类别</th>

        </tr>

    </thead>

    <tbody data-bind="foreach:products">

        <tr>

            <td data-bind="text: name"></td>

            <td data-bind="text: category"></td>

        </tr>

    </tbody>

</table>

@section scripts

{

    <script src="~/Scripts/knockout-3.2.0.js"></script>

    <script src="~/Scripts/knockout.validation.js"></script>

    <script src="~/Scripts/zh-CN.js"></script>

    <script type="text/javascript">

        //使用构造函数定义View Model，用data作为参数

        var Product = function(data) {

            this.name = ko.observable(data.name);

            this.category = ko.observable(data.category);

        };

        var RealVM = function(products) {

            var productsArr = [];

            for (var i = 0; i < products.length; i++) {

                var product = new Product(products[i]);

                productsArr.push(product);

            }

            this.products = ko.observableArray(productsArr);

        };

        

        //页面加载完毕向服务端发送异步请求

        $(function () {

            $.getJSON('@Url.Action("GetProducts","Home")', function(data) {

                var vm = new RealVM(data);

                ko.applyBindings(vm);

            });

        });

    </script>

}

 

HomeController相关代码为：

        static readonly IProductRepository repository = new ProductRepository();

        public JsonResult GetProducts()

        {

            var allProducts = repository.GetAll();

            var result = from p in allProducts

                select new {name = p.Name, category = p.Category};

            return Json(result, JsonRequestBehavior.AllowGet);

        }

 

总结：使用foreach绑定需要一个提供集合属性的View Model，通过ko.observableArray()让集合属性具有Observable。