本篇体验使用 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. mysql5.7主从复制--在线变更复制类型【转】

    这里说一下关于如何在线变更复制类型(日志复制到全局事物复制),参考课程:mysql5.7复制实战 先决条件     (1)集群中所有的服务器版本均高于5.7.6(2)集群中所有的服务器gtid_mod ...

  2. rank over partition by

    高级函数,分组排序 over: 在什么条件之上. partition by e.deptno: 按部门编号划分(分区). order by e.sal desc: 按工资从高到低排序(使用rank() ...

  3. (mysql)触发器、事件、事务、函数

    1.事务操作原理:事务开启之后Start transaction,所有的操作都会临时保存到事务日志.只有在得到commit才会关闭,否则清空:2.设置回滚点: savepoint 回滚点名字:  回到 ...

  4. Java中抽象类概述

    抽象类 1.抽象类的定义 抽象类是为子类提供一个规范,这就必须联系到继承: 抽象类的制定就是让子类继承的:  public abstract 类名{ //类体 //抽象方法 修饰符 abstract ...

  5. https-配置使用HTTPS的ASP.NET Web应用

    有关HTTPS.SSL以及SSL证书的工作原理,参见 <HTTPS-HTTPS原理> <HTTPS-SSL证书> <HTTPS-攻击实例与防御> 本文将演示如何在I ...

  6. Java编程的逻辑 (42) - 排序二叉树

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  7. oracle中 connect by prior 递归查询

    Oracle中start with...connect by prior子句用法 connect by 是结构化查询中用到的,其基本语法是: select ... from tablename sta ...

  8. 如何简单区分Web前后端与MVC

    MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...

  9. Kmeans 聚类 及其python实现

    主要参考   K-means 聚类算法及 python 代码实现    还有  <机器学习实战> 这本书,当然前面那个链接的也是参考这本书,懂原理,会用就行了. 1.概述 K-means  ...

  10. 2018年东北农业大学春季校赛 C-wyh的商机

    一天,你们wyh学长和你们zhl学长玩一个游戏,这个游戏规则是这样的 给你n个城市,保证这n个城市之间都只有一条道路可以到达. 有一件物品,在所有城市中都是一样的,但是由于各个城市的经济发展不同,导致 ...