我是 knockoutjs 的新手。我试图将json数据映射到ko。这是我的代码。
我想解析json数据并将其显示在表格中。当我尝试 ko.compute 它抛出我 self.firstName() 不是一个函数。当我尝试在计算函数之前在控制台中记录 firstName 的值时,它会在 json 数组中打印 3 个值并运行第四次并抛出一个错误,说 self.firstName 不是函数。
编辑:当我删除计算并仅打印 json 中的数据时,它能够正确映射。当我使用计算时出现问题。当我在计算之前和映射之后尝试 console.log(self.firstName() ) 时,它会打印 jsonarray 中的值,但不是解析 3 次,而是解析 4 次和第 4 次,它给了我“不是函数”错误
<div id="employeeList">
<table border ="2">
<thead>
<tr>
<th> First Name</th>
<th> Last Name</th>
<th> Age</th>
<th> Phone</th>
<th> Email</th>
</tr>
</thead>
<tbody data-bind="foreach:employees">
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:firstName"></td>
<td data-bind="text:lastName"></td>
<td data-bind="text:age"></td>
<td data-bind="text:phone"></td>
<td data-bind="text:email"></td>
</tr>
</tbody>
</table>
</div>
这是我的js代码
var personMapping={
'copy':['age'],
'employees': {
create: function(options) {
return new PersonViewModel(options.data);
}
}
};
function PersonViewModel(data){
var self=this;
ko.mapping.fromJS(data,personMapping,this);
self.name=ko.computed(function(){
return self.firstName()+' '+self.lastName();
},this);
}
var data={employees:
[{
firstName: 'Marco',
lastName: 'Franssen',
age: 26,
phone: 12346789,
email: "a@a.com"
},
{
firstName: 'Kumar',
lastName: 'Rangarajan',
age: 26,
phone: 123467890,
email: "a@b.com"
},
{
firstName: 'A',
lastName: 'B',
age: 26,
phone: 6775675567567,
email: "a@c.com"}]
}
ko.applyBindings(new PersonViewModel(data), $('#employeeList'));
});
这是 jsfiddle 代码:http: //jsfiddle.net/YfqPs/1/