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