本篇体验使用 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";
}
名称
类别
@section scripts
{ //使用构造函数定义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);
});
});
}
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。