Javascript 将json数组映射到ko抛出错误

我是击倒JS的新手。我试图将json数据映射到ko。这是我的密码

我想解析json数据并将其显示在表中。当我尝试ko.compute时，它抛出了我自己。firstName（）不是一个函数。当我尝试在console中记录计算函数之前的firstName的值时，它会打印json数组中的3个值，并再次运行，并抛出一个错误，表示self.firstName不是函数

---

Edit：当我删除computed并只打印json中的数据时，它能够正确映射。当我使用computed时会出现问题。 当我在映射之前和之后尝试console.log（self.firstName（））时，它会打印jsonarray中的值，但不是解析3次，而是解析4次和第4次，它会给出“nota function”错误

<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>

---

这是JSFIDLE代码：

在您的

数据中，
名字在
员工下

看起来你应该这样打电话：

return new PersonViewModel(options.data.employees);

包含
ko.computed
的视图模型应接受单个员工并进行计算

function PersonViewModel(employee){
   var self=this;
   self.name=ko.computed(function(){
      return self.firstName()+' '+self.lastName();
  },this);
}

您的代码执行了4次，因为您正在将
PersonViewModel
重用为您的主视图模型和
personMapping
中的视图模型：


您的
PersonViewModel
将为您的
employees
数组中的每个项目调用3个项目，调用结果如下：

create: function(options) {
   return new PersonViewModel(options.data);
}

ko.applyBindings(new PersonViewModel(data), $('#employeeList'));


您的
PersonViewModel
在此次呼叫的4次结果中被呼叫：

create: function(options) {
   return new PersonViewModel(options.data);
}

ko.applyBindings(new PersonViewModel(data), $('#employeeList'));

这一次它抛出异常，因为在主
数据上没有
firstName
属性，只有在员工上


有多种方法可以解决此问题，但所有这些方法都需要创建适当的独立“主”视图模型

最简单的解决方案是使用
var viewmodel=ko.mapping.fromJS（数据，personMapping）创建“主”视图模型
并在您的
ko中使用它。applyBindings
：

var viewModel = ko.mapping.fromJS(data, personMapping);
ko.applyBindings(viewModel, $('#employeeList')[0]);

演示
我正在努力让您的JSFIDLE处理相关的外部依赖项。。因此，现在我建议您不要使用映射，或者尝试使用本打算取代它的映射器

我所期望的是，您从
personMapping
对象的上下文调用
create
函数，因为它是该对象上的一个属性

这意味着在下面的代码中，我会认为
这实际上是
personMapping
，而不是
PersonViewModel
，这意味着你的
映射.fromJS
正试图将
personMapping
映射到自身

var self=this;
ko.mapping.fromJS(data,personMapping,this);

当我删除computed并只打印json中的数据时，它能够正确映射。问题出现在我使用computed时。问题是您的
self
是
data
，它没有
firstName
作为其属性。但当我在计算前打印self.firstName（）时，它正确地打印了json数组中的值。但是它会进行4次解析，而不是3次，在第四次解析中，它会抛出not a函数错误。您的viewmodel是
PersonViewModel
您在
ko.applyBindings
中使用的。。。这是打字错误吗？你想用这个实现什么？某种递归映射？顺便说一句，你的fiddle无法使用jquery，而且映射插件也丢失了…
console.log（这个）内部
PersonViewModel
。我想这可能是
personMapping
，这可能是您的问题。我想创建自己的映射。因此，我创建了personmapping，我不想让年龄成为一个可观察的对象，并创建了employees来映射到foreach中的我的员工。我发现这是可以做到的方法之一。@Pricey：我不想对每个变量都做一个可观察的。因此我尝试了映射。是的，当我创建firstName作为可观察对象时，使用computed并没有问题。但我希望除了年龄以外的一切都是可以观察到的。我不知道在那种情况下如何映射。@KumarR是的，我从我的评论中删除了它，因为我忘了映射是为你做的。我建议您尝试
console.log（这个）虽然。。。请参阅和了解对象方法。感谢您提供的解决方案。如果不创建主视图模型，您能否告诉我是否有其他方法可以实现我想要实现的目标？您不能将相同的功能
PersonViewModel
重新用于您的
employeeList
以及单个员工。您需要有两个ViewModel才能使其正常工作。这是一个具有两个命名viewmodel的替代解决方案：这是另一个解决方案，其中您的
PersonViewModel
是您的“主”viewmodel：