從ajax調用一個observableArray調用

Question

點擊「添加」按鈕，數據庫的結果將被提取。 我想要這個結果在observableArray中填充或計算（爲未來計算）。我不知道如何填充可觀察數組。下面是Ajax調用

KNOCKOUTJS

self.addToCartViaProdList = function (item, event) 
{ 
    /*get current item index*/ 
    /*in dom element $index() is enough but in viewModel a context is to be obtained*/ 
    var context = ko.contextFor(event.target); 
    var index = context.$index(); 
    var incQty = self.prodList()[index].ProductQty(); 
    var prodID = self.prodList()[index].ProductID(); 

    var verProdInCombo = ko.toJS({"prodID":prodID}); 
    //check product in combos 
    $.ajax 
    ({ 
     url: '**************ProdID.php', 
     type: "post", 
     data: verProdInCombo, 
     success: function(result) 
     { 
      /*The result is in below format*/ 
      /*************** 
      "{"ComboName":"SinglePack","ComboItemsName":"Aloo Tikki Burger,Mango Lassi,Tomato Soup","ComboItemsID":"101_1_11,1105_11_110,901_9_90","ComboTotalPrice":"90.25"}" 
      ********************/ 
     }, 
     error: function(xhr, status){ 
      alert(xhr); 
      alert(status); 
     } 
    }); 
}; 

我收到的成功結果的代碼，但我所有的努力把這個數據observableArray還沒有產生任何卓見成效。

我試過將結果保存在localSession中。然後用計算的變量從localSession挑值，

然後，我曾嘗試使用ko.mapping.fromJS（結果），這因此未正常工作或

我想從服務器接收到的顯示列表在一個div如下：

HTML CODE

<div class="comboSeg" > 
    <div data-bind="foreach: comboDataList"> 
     <div data-bind="text: ComboName"> 
     </div> 
     <div data-bind="text: ComboItemsName"> 
     </div> 
     <div data-bind="text: ComboTotalPrice"> 
     </div> 
    </div> 
</div> 

的不同版本試圖knockoutjs的是：

VERSION 1：保存DAT一個在本地會話和使用計算

self.comboDataList = ko.computed(function() 
{ 
    var comboDataItems = []; 
    if (self.comboValChange() == "DO" && localStorage.getItem("comboDataItem") != null) 
    { 
     var dataSaved = localStorage.getItem("comboDataItem"); 
     comboDataItems = ko.utils.arrayMap(dataSaved, function(item) 
     { 
      return new ComboList(item.ComboName, item.ComboItemsName, item.ComboItemsID, item.ComboTotalPrice); 
     }); 

     comboDataItems.push(dataSaved); 
    } 

    return comboDataItems; 
},this); 

//Ajax call is as follows: 

    $.ajax 
    ({ 
     url: '***************ProdID.php', 
     type: "post", 
     data: verProdInCombo, 
     success: function(result) 
     { 
      localStorage.removeItem("comboDataItem"); 
      localStorage.setItem("comboDataItem",result); 
      //Forcing the computed function to be called, just a workaround 
      self.comboValChange(""); 
      self.comboValChange("DO"); 
     }, //Result will contain whatever server will send back as a mesage 
     error: function(xhr, status){ 
      alert(xhr); 
      alert(status); 
     } 
    }); 

版本2：力推comboDataList

獲得成功味精

$.ajax 
    ({ 
     url: '*************ProdID.php', 
     type: "post", 
     data: verProdInCombo, 
     success: function(result) 
     { 
      self.comboDataList.push(result); 
      //Also tried below one 
      //self.comboDataList.push(ko.toJS(result)); 
     }, //Result will contain whatever server will send back as a mesage 
     error: function(xhr, status){ 
      alert(xhr); 
      alert(status); 
     } 
    }); 

現在我已經啓用了在瀏覽器中的denug我得到這個錯誤信息兩個版本：

錯誤：未捕獲的ReferenceError：無法處理綁定 「文本：函數（）{返回} ComboName」 消息：ComboName沒有定義

Answer 1

只需將observableArray在作爲阿賈克斯的成功函數中調用：

$.ajax 
({ 
    url: '**************ProdID.php', 
    type: "post", 
    data: verProdInCombo, 
    success: self.comboDataList, 
    error: function(xhr, status){ 
     alert(xhr); 
     alert(status); 
    } 
}); 

這假定您沒有需要更新裏面的陣列行的單個元素。

Answer 2

這是我如何得到它的工作，猜測這不是最好的方法。 只需將成功的JSON對象推入到observableArray中並未反映在我的html頁面中，因此我使用計算來完成它。

淘汰賽代碼是

self.comboDataList = ko.computed(function() 
{ 
    var comboDataItems = []; 
    //self.comboValChange() an observable variable just to invoke the computed function everytime there is update 
    if (self.comboValChange() == "DO" && localStorage.getItem("comboItems") != null) 
    { 
     var dataSaved = ko.utils.parseJson(localStorage.getItem("comboItems")); 
     comboDataItems = ko.utils.arrayMap(dataSaved, function(item) 
     { 
      return new ComboList(item.ComboName, item.ComboItemsName, item.ComboItemsID, item.ComboTotalPrice); 
     }); 

     comboDataItems.push(dataSaved); 
    } 

    return comboDataItems; 
},this); 


//The ajax call 
    $.ajax 
    ({ 
     url: '**************ProdID.php', 
     type: "post", 
     data: verProdInCombo, 
     dataType:'json', 
     success: function(result) 
     { 
      //using localStorage to store the result 
      localStorage.removeItem("comboItems"); 
      localStorage.setItem("comboItems", ko.toJSON(result)); 
      //updating so that everytime computed is called 
      self.comboValChange(""); 
      self.comboValChange("DO"); 
     }, //Result will contain whatever server will send back as a mesage 
     error: function(xhr, status){ 
      alert(xhr); 
      alert(status); 
     } 
    }); 

的HTML是：

<div class="comboSeg" > 
     <div data-bind="foreach: comboDataList"> 
      <div data-bind="text: ComboName"> 
      </div> 
      <div data-bind="text: ComboItemsName"> 
      </div> 
      <div data-bind="text: ComboTotalPrice"> 
      </div> 
     </div> 
    </div> 

JSON的結構是：

"{"ComboName":"SinglePack","ComboItemsName":"Aloo Tikki Burger,Mango Lassi,Tomato Soup","ComboItemsID":"101_1_11,1105_11_110,901_9_90","ComboTotalPrice":"90.25"}"‌ 

因此視圖模型將是：

function ComboList(ComboName, ComboItemsName, ComboItemsID, ComboTotalPrice) 
{ 
    this.ComboName = ko.observable(ComboName); 
    this.ComboItemsName = ko.observable(ComboItemsName); 
    this.ComboItemsID = ko.observable(ComboItemsID); 
    this.ComboTotalPrice = ko.observable(ComboTotalPrice); 
}