在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 ...
随机推荐
- Apache+jboss群集优化
故障现象: 俩台服务器jboss做的Apache群集,之前优先访问A,造成大量session都在A上有报警. 调整 调整Apache 配置jboss集群参数,将Node2的worker.node2.l ...
- Linux6.5 安装Python3.X(转载)
1.获取Python 3.6.3 通过官网https://www.python.org/downloads/下载Python 3.4.3源码: 源码获取命令如下:wget https://www.py ...
- (转载)ibatis:解决sql注入问题
原文地址:http://blog.csdn.net/scorpio3k/article/details/7610973 对于ibaits参数引用可以使用#和$两种写法,其中#写法会采用预编译方式,将转 ...
- java8新特性详解(转)
原文链接. 前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with ...
- Newtonsoft 反序列化字符串
string json=“[{“name”:”zhangsan”,”age”:”12”},{“name”:”zhangsan”,”age”:”12”}]” 方法1: JArray arr = (JAr ...
- C++学习笔记(原创)
以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读了很多C++经典著作,有<effective c++>,<more effecti ...
- Linux学习笔记:常用命令grep、iconv、cp、mv、rm
本篇记录一些近期常用的命令. 一.grep过滤 grep过滤 不包含某些字符串 cat test.txt | grep -v '.jpg' 过滤jpg结尾的图片 cat test.txt | grep ...
- Kotlin中var和val的区别
Kotlin中有两个关键字定义变量,这两个关键字外形看着差别很小就只差了一个字母,但实际差别很大的. var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和Java ...
- Java动态性之--反射机制
1. 动态语言 程序运行时,可以改变结构或变量类型.典型的语言: Python.ruby.javascript等 如下javascript代码 function test(){ var s = &qu ...
- zookeeper集群自动启动脚本
定义脚本boot.sh启动zookeeper集群(hadoop1,hadoop2,hadoop3) #!/bin/bash echo "start zkServer..." do ...