Question

我是knockoutjs的新手。我试图将json数据映射到ko。这是我的代码。

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

编辑：当我删除计算机并像在json中一样打印数据时，它能够正确映射。当我使用计算机时出现问题。当我在计算之前和在映射之后尝试console.log（self.firstName（））时，它会在jsonarray中打印值，而不是解析3次解析4次而第4次它给了我“not a 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>

这是我的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/

Answer 1

您的代码会被执行4次，因为您正在PersonViewModel重新使用personMapping作为主视图模型和视图模型：

PersonViewModel您的employees数组中的每个项目都会为您create: function(options) { return new PersonViewModel(options.data); }调用3个项目：
```
PersonViewModel
```
您的ko.applyBindings(new PersonViewModel(data), $('#employeeList'));因此次通话而被召唤4次：
```
firstName
```
这次它会引发异常，因为主data上的var viewModel = ko.mapping.fromJS(data, personMapping);属性仅限于您的员工。

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

最简单的解决方案是使用ko.applyBindings创建“主”视图模型并在var viewModel = ko.mapping.fromJS(data, personMapping); ko.applyBindings(viewModel, $('#employeeList')[0]);中使用它：

{{1}}

演示JSFiddle

Answer 2

在data，firstName位于employees。

之下

看起来你应该拨打电话：

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);
}

jsFiddle

Answer 3

我正在努力让你的jsfiddle使用相关的外部依赖项..所以现在我建议你不要使用映射或尝试这个意图取代它的映射器http://coderenaissance.github.io/knockout.viewmodel/

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

这意味着在下面的代码中，我认为this实际上是personMapping而不是PersonViewModel，这意味着您的mapping.fromJS正在尝试映射personMapping自己。

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

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

3 个答案: