Knockout - 綁定從模型計算

Question

我試圖使用計算的observable來創建一個自定義div ID（例如branch3）。但是，任何時候我嘗試綁定計算，我會得到「無法解析綁定」錯誤。我確信我可以用不同的方式來做這件事，但我不明白爲什麼我不能在這裏使用計算器。我很確定我已經看到它完成。

這是我一直在努力的jsfiddle。

FIDDLE

var branchList =[{"Id":1,"Latitude":40.2444400000,"Longitude":-111.6608300000,"StreetAddress":"1525 W 820 N","BranchName":"GPS","City":"Cityplacwe","State":"UT","Zip":"84601"},{"Id":2,"Latitude":40.2455550000,"Longitude":-111.6616100000,"StreetAddress":"123 N Center","BranchName":"GPS Branch 2","City":"Lehi","State":"UT","Zip":"84043"}]; 

//myMarkers = new Array(); 

var Branch = function (data) { 
    var self = this; 
    self.Id = ko.observable(data.Id); 
    self.Latitude = ko.observable(data.Latitude); 
    self.Longitude = ko.observable(data.Id); 
    self.BranchName = ko.observable(data.BranchName); 
    self.StreetAddress = ko.observable(data.StreetAddress); 
    self.City = ko.observable(data.City); 
    self.State = ko.observable(data.State); 
    self.Zip = ko.observable(data.Zip); 
    this.DivId = ko.computed(function() { 
    return self.Id(); 
    }); 
    //self.DivId = ko.computed({ 
    // //Reading from object to field 
    // read: function() { 
    // return "branch" + self.Id(); 
    // }, 
    // //writing from field to object 
    // write: function (value) { 

    // } 
//}); 

} 

var BranchViewModel = function() { 
    var self = this; 

    //create knockout array 
    self.branchArrayKO = ko.observableArray(branchList); 
} 

和HTML

<div data-bind="foreach: branchArrayKO"> 


<div data-bind="attr: {'id': DivId}"> 
    <p></p> 
    <h2></h2> 
    <ul> 
    <li data-bind="text: Id"></li> 
    <li data-bind="text: BranchName"></li> 
    <li data-bind="text: StreetAddress"></li> 
    </ul> 
</div> 

</div> 

Answer 1

您需要將原始的JavaScript數組轉換成Branch ES陣列。這樣做的一個方法是在列表中使用ko.utils.arrayMap遍歷每個項目，並創建一個新的Branch：

var BranchViewModel = function() { 
    var self = this; 

    //create knockout array 
    self.branchArrayKO = ko.observableArray(ko.utils.arrayMap(branchList, function(branch) { 
     return new Branch(branch); 
    })); 
} 

更新例如：http://jsfiddle.net/hawMW/2/

另一種選擇可能是有用的是knockout mapping plugin，您可以使用它來自動化全部或部分映射過程。