在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 allProductsselect new {name = p.Name, category = p.Category};return Json(result, JsonRequestBehavior.AllowGet);}
总结:使用foreach绑定需要一个提供集合属性的View Model,通过ko.observableArray()让集合属性具有Observable。
在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合的更多相关文章
- 在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- [摘]在ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
随机推荐
- 【转】SpringMVC Controller 介绍
转自:原文url 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ...
- Webservice soap wsdl区别之个人见解
原文:http://blog.csdn.net/pautcher_0/article/details/6798351 Web Service实现业务诉求:Web Service是真正“办事”的那个,提 ...
- Robotium_断言方法assert、is、search
下面的这些方法都主要用来判断测试结果是否与预期结果相符,一般把is和search方法放在assert里面判断.assert最常用的还是assertThat方法,是Junit的判断,这里就不多说了.断言 ...
- Shiro:授权控制
对容易忽略的地方记录如下: 1.需要引入下面2个依赖,具体版本根据自身环境修改: <dependency> <groupId>org.apache.geronimo.bundl ...
- centos7 部署 open-falcon 0.2.0
=============================================== 2019/4/29_第3次修改 ccb_warlock 更新 ...
- css部分复习整理
CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...
- JavaScript:document.execCommand()的用法
document.execCommand()的用法小记 一.语法 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用. 如下格式:document.ex ...
- django startproject xxx:报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 13: ordinal not in range(128)
django startproject xxx:报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 13: o ...
- svn导入项目和部署方面的相关问题
前一阵子忙于部署项目的事情,在这个过程之中遇到了一些问题,查阅了相关资料解决了问题于是就决定分享给大家,可能会对大家有一定的帮助.我在下面中可能会提到dubbo的一些问题,dubbo是用于分布式的系统 ...
- linux下如何查看命令的绝对路径
在linux上经常使用ls,grep,vi等命令,如何查看这些命令的绝对路径呢? 通过whereis/which 就可以啦,但是这两个命令之间还是有一些区别.网上查了一下资料,解释如下: which ...