本篇体验使用 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。

在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合的更多相关文章

  1. 在ASP.NET MVC中使用Knockout实践09,自定义绑定

    Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...

  2. 在ASP.NET MVC中使用Knockout实践01,绑定Json对象

    本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...

  3. 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容

    在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...

  4. 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证

    在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...

  5. 在ASP.NET MVC中使用Knockout实践05,基本验证

    本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...

  6. 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容

    通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...

  7. 在ASP.NET MVC中使用Knockout实践03,巧用data参数

    使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...

  8. 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法

    本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...

  9. [摘]在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

随机推荐

  1. Apache+jboss群集优化

    故障现象: 俩台服务器jboss做的Apache群集,之前优先访问A,造成大量session都在A上有报警. 调整 调整Apache 配置jboss集群参数,将Node2的worker.node2.l ...

  2. Linux6.5 安装Python3.X(转载)

    1.获取Python 3.6.3 通过官网https://www.python.org/downloads/下载Python 3.4.3源码: 源码获取命令如下:wget https://www.py ...

  3. (转载)ibatis:解决sql注入问题

    原文地址:http://blog.csdn.net/scorpio3k/article/details/7610973 对于ibaits参数引用可以使用#和$两种写法,其中#写法会采用预编译方式,将转 ...

  4. java8新特性详解(转)

    原文链接. 前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with ...

  5. Newtonsoft 反序列化字符串

    string json=“[{“name”:”zhangsan”,”age”:”12”},{“name”:”zhangsan”,”age”:”12”}]” 方法1: JArray arr = (JAr ...

  6. C++学习笔记(原创)

    以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读了很多C++经典著作,有<effective c++>,<more effecti ...

  7. Linux学习笔记:常用命令grep、iconv、cp、mv、rm

    本篇记录一些近期常用的命令. 一.grep过滤 grep过滤 不包含某些字符串 cat test.txt | grep -v '.jpg' 过滤jpg结尾的图片 cat test.txt | grep ...

  8. Kotlin中var和val的区别

    Kotlin中有两个关键字定义变量,这两个关键字外形看着差别很小就只差了一个字母,但实际差别很大的. var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和Java ...

  9. Java动态性之--反射机制

    1. 动态语言 程序运行时,可以改变结构或变量类型.典型的语言: Python.ruby.javascript等 如下javascript代码 function test(){ var s = &qu ...

  10. zookeeper集群自动启动脚本

    定义脚本boot.sh启动zookeeper集群(hadoop1,hadoop2,hadoop3) #!/bin/bash echo "start zkServer..." do ...