更新上ObservableArray下項目未傳播到UI在ObservableArrayItem不更新UI

更新我的淘汰賽模型像下面更新上ObservableArray下項目未傳播到UI在ObservableArrayItem不更新UI

我的C＃的數據模型看起來像這樣

public class DTO 
    {  
     public decimal Amount { get; set; } 
     public decimal AmountLeft { get; set; }  
     public TypeDTO[] BType { get; set; } 
    } 

     public class TypeDTO 
    { 
     public string Description { get; set; } 
     public decimal Amount { get; set; } 
    }

這裏是我的JS，初始加載它工作正常

var DetailsViewModel; 

    $.ajax({ 
     url: "url", 
     type: "get", 
     contentType: "application/json", 
     success: function (result) { 

      for (i = 0; i < result.BType.length; i++) { 
       addPercent(result.BType[i], result.Amount); 
      } 
      DetailsViewModel = ko.mapping.fromJS(result); 
      ko.applyBindings(DetailsViewModel, $("#elem-box").get(0)); 


    }); 

function addPercent(BType, totalAmount) //**adds two new fields to what server sends** 
    { 
     BType.Percent = ko.computed(function() { 

      return ((BType.Amount/totalAmount) * 100).toFixed(2) + '%'; 
     }); 

     BType.Ratio = ko.computed(function() { 

      return ((BType.Amount/totalAmount)).toFixed(2); 
     }); 

    }

在初始UI上綁定它可以很好地工作。後來當我更新DetailsViewModel.BType中的數組時，它在UI中沒有獲取更新。在某些事件

觸發經過UI元素的索引對應於B型陣列

var totalAmount = DetailsViewModel.Amount(); 

DetailsViewModel.BType()[index].Amount = totalAmount * 10; 
DetailsViewModel.AmountLeft = totalAmount - DetailsViewModel.BType()[index].Amount; 

addPercent(DetailsViewModel.BType()[index], totalAmount);

上addPercent下進行UI側也不更新既不BTYPE陣列作出的更新的獲取更新功能，在console.log我可以看到所有udpate在模型端執行成功運行。任何想法爲什麼arrayItem更新不會傳播到UI？

來源

2014-03-30 Justin Homes

您無法更新單個索引。您需要將整個數組傳遞給observable，以便knockout可以運行內部更新代碼。

var bt = DetailsViewModel.BType(); 
bt[index].Amount = totalAmount * 10; 
DetailsViewModel.BType(bt);

來源

2014-03-30 19:19:28

但如何更新函數addPercent下的計算值？ –

而且什麼@Robert Krzyzanowski說，你需要遵循以下模式：

var typeDTOs = ko.observableArray([]); 
var underlyingArray = []; 

_.each(result.BType, function(typeDTO) { 
    typeDTO = addPercent(typeDTO, result.Amount); 
    underlyingArray.push(typeDTO); 
} 

typeDTOs(underlyingArray);

或諸如此類的話（我用上面只是爲了清楚起見underscore.js）。您想確保不會推入您的可觀察的陣列;而是推入一個底層數組。然後，您可以一次更新可觀察數組。如果你不這樣做，你會發現你推入可觀察數組的每個項目發生變化事件 - 通常是不受歡迎的。

另注可觀察到的陣列

只是一個工具...如果數組的元素是對象文本，並希望您的用戶界面到文字的屬性變化作出反應，就必須使每個UI對象屬性也是可觀察的。

來源

2014-03-30 21:48:22

更新上ObservableArray下項目未傳播到UI在ObservableArrayItem不更新UI

回答

相關問題