zoukankan      html  css  js  c++  java
  • 在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 allProducts
    
                    select new {name = p.Name, category = p.Category};
    
                return Json(result, JsonRequestBehavior.AllowGet);
    
            }
    

    14

     

    总结:使用foreach绑定需要一个提供集合属性的View Model,通过ko.observableArray()让集合属性具有Observable。

  • 相关阅读:
    HDU 5400 Arithmetic Sequence
    poj 3041 Asteroids
    后缀自己主动机(SAM)学习指南
    【POJ3740】Easy Finding DLX(Dancing Links)精确覆盖问题
    高速幂小模板
    有用函数编程
    将C++的标识符转成OC的标识符
    【翻译自mos文章】oracle db 中的用户账户被锁--查看oracle用户的尝试次数
    Hibernate基础-HelloWord
    Android项目之HomeHealth基础学习2:Service
  • 原文地址:https://www.cnblogs.com/darrenji/p/4070706.html
Copyright © 2011-2022 走看看