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調用綁定對象的列表

回答

相關問題