0

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

4

3 回答 3

2

您的代码被执行了 4 次,因为您正在重用您PersonViewModel的主视图模型和您的视图模型personMapping

  • 对于此调用的数组PersonViewModel中的每个项目,您会被称为 3 个项目:employees

    create: function(options) {
       return new PersonViewModel(options.data);
    }
    
  • 此呼叫导致您PersonViewModel被呼叫 4 次:

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

    这一次它抛出了异常,因为你的主服务器上没有firstName财产,data只有你的员工。

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

最简单的解决方案是创建您的“主要”视图模型var viewModel = ko.mapping.fromJS(data, personMapping);并将其用于您的ko.applyBindings

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

演示JSFiddle

于 2013-09-30T20:52:54.760 回答
0

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

于 2013-09-30T20:05:11.787 回答
0

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

我所期待的是您create从对象的上下文中调用该函数,personMapping因为它是该对象的一个​​属性。

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

var self=this;
ko.mapping.fromJS(data,personMapping,this);
于 2013-09-30T20:53:53.053 回答