困惑視圖模型的創建，我需要添加一個計算字段

Question

我的JSON調用返回一個對象數組：

[ 
{ 
Table: 1, 
FirstName: "Bert", 
LastName: "Smith", 
Place: 1 
}, 
{ 
Table: 1, 
FirstName: "Suzanne", 
LastName: "Smith", 
Place: 2 
}, 
{ 
Table: 1, 
FirstName: "Matthew", 
LastName: "Stewart", 
Place: 3 
}, 
{ 
Table: 1, 
FirstName: "Brian", 
LastName: "Robinson", 
Place: 4 
}, 
{ 
Table: 1, 
FirstName: "Jennifer", 
LastName: "Robinson", 
Place: 5 
}, 
{ 
Table: 1, 
FirstName: "Andrew", 
LastName: "Caygill", 
Place: 6 
}, 
{ 
Table: 1, 
FirstName: "Susan", 
LastName: "Caygill", 
Place: 7 
}, 
{ 
Table: 1, 
FirstName: "John", 
LastName: "Spreadbury", 
Place: 8 
}, 
{ 
Table: 1, 
FirstName: "Anne-Marie", 
LastName: "Nevin", 
Place: 9 
}] 

我在我的HTML模板：

<script type="text/html" id="dataLine"> 
    <div class="itemLine"> 
     <div class="Name"> 
      <span class="fixtureBoxLine" data-bind="text: fullName"></span> 
     </div> 
     <div class="TableNo"> 
      <span class="fixtureBoxLine" data-bind="text: Table"></span> 
     </div> 
    </div> 
</script> 

，並且綁定是：

<div data-bind="template: { name: 'dataLine', foreach: pageCol1 }"></div> 

我的視圖模型爲：

var viewModel = { 
    fields: ko.observableArray([]), 
    pageSize: ko.observable(1), 
    pageIndex: ko.observable(0) 
}; 
viewModel.pageCol1 = ko.computed(function() { 
    var size = Number(this.pageSize()); 
    var start = this.pageIndex() * size * 2; //2 cols per page 
    var end = start + size; 
    return this.fields.slice(start, end); 
}, viewModel); 

除了我無法獲得「全名」屬性外，所有工作都正常。如果我嘗試將它添加到視圖模型以同樣的方式，因爲我上面「pageCol1」沒有，然後我的JSON成功財產少了點：

viewModel.fields(xlData); 

這是行不通的，因爲沒有「全名」屬性關於返回的數據。

我覺得我已經嘗試過所有可能的組合，現在讓我頭疼！請有人指出我在正確的方向？

謝謝！

Answer 1

嘗試通過增加新的領域（從另外兩個級聯）您的回覆陣列喜歡你pageCol1延伸：

viewModel.pageCol1 = ko.computed(function() { 
    var size = Number(this.pageSize()); 
    var start = this.pageIndex() * size * 2; //2 cols per page 
    var end = start + size; 

    for(var i = 0, len = this.fields.length; i < len; i++) { 
     this.fields[ i ].fullName = this.fields[ i ].FirstName + ' ' + this.fields[ i ].LastName; 
    } 

    return this.fields.slice(start, end); 
}, viewModel); 

所以最後的結果你遍歷你的數組之前它會像：

[ 
{ 
Table: 1, 
FirstName: "Bert", 
LastName: "Smith", 
fullName: "Bert Smith", 
Place: 1 
}, 
{ 
Table: 1, 
FirstName: "Suzanne", 
LastName: "Smith", 
fullName: "Suzanne Smith", 
Place: 2 
}, 
{ 
Table: 1, 
FirstName: "Matthew", 
LastName: "Stewart", 
fullName: "Matthew Stewart", 
Place: 3 
}, 
...