困惑视图模型的创建，我需要添加一个计算字段

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 
}, 
...