在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。