KnockoutJS从AJAX调用绑定对象的列表

我描述成我的Javascript代码有一个数据对象如下：KnockoutJS从AJAX调用绑定对象的列表

//Data Object that represents products 
    function Product(n, p, t, d) { 
     this.name = ko.observable(n); 
     this.price = ko.observable(p); 
     tags = typeof (t) !== 'undefined' ? t : []; 
     this.tags = ko.observableArray(tags); 
     discount = typeof (d) !== 'undefined' ? d : 0; 
     this.discount = ko.observable(discount); 
     this.formattedDiscount = ko.computed(function() 
     { return (this.discount() * 100) + "%"; } 
           ,this); 
    }

然后，我有一个AJAX调用JSON格式检索数据

$(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "ShoppingCartExampleExample.aspx/SendData", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       alert(msg.d);    
      } 
     }); 
    });

AJAX调用工作，我得到这个结果为：

[ 
{"Discount":0, 
    "Name":"Chocolate", 
    "Price":"7.99" 
    "tags": ["Mars","Snickers"] 
}, 
{"Discount":0.05, 
    "Name":"Beer", 
    "Price":"3.99" 
"tags": ["Large","Extra"] 
} 
]

我怎么能映射对象名单从AJAX调用收到我的数据对象？我想将这个列表映射到一个可观察数组，并将标签数组映射到一个可观察数组，因为我有一个foreach绑定来填充一个HTML表来呈现产品和标签。

谢谢

来源

2016-02-11 Gabriel Augusto

Knockout utility functions现在包含在最新版本中，是我处理事物的首选方式。映射插件有时会被过度使用，如果使用不当，可能会使对象更加臃肿。

当您返回对象的数组，使用实用工具类：

var newProducts = ko.utils.arrayMap(data, function(dataItem) { 
    return new Product(...); 
}); 

ko.utils.arrayPushAll(myViewModel.products, newProducts);

漂亮的直线前进和支持。您甚至可以将arrayMap直接放入arrayPushAll作为第二个参数，并跳过声明newProducts变量。

来源

2016-02-11 15:48:44 beauXjames

所以在你success功能假设msg.d是你的阵列。只需循环访问数组，并为每个项调用new Product，然后将结果推送到父视图模型所在的可观察数组中。举例来说，如果你有这样的：

var rootViewModel = function() { 
    this.products = ko.observableArray(); 
    //... whatever other properties and functions you have 
} 

var myViewModel = new rootViewModel();

然后在你的Ajax调用的success功能，你会做这样的事情：

success: function (msg) { 
    msg.d.forEach(function(item) { 
     myViewModel.products.push(new Product(item.Name, item.Price, item.tags. item.Discount)); 
    }    
}

一些这方面的管道可以通过使用可避免mapping插件，这是非常可配置的，以便您可以将您的ajax调用中的普通javascript对象映射到您想要的任何视图模型。

来源

2016-02-11 15:39:24

KnockoutJS从AJAX调用绑定对象的列表

回答

相关问题