knockout.js嵌套对象中的多重映射

Question

我是新来的knockout.js，我不知道如何对我的对象进行多重映射。 这是我的数据从服务器：

var persons = { 
    'value': [ 
     { 
      "id": "1", 
      "civility": "Mr.", 
      "firstname": "john", 
      "lastname": "doe", 
      "phone": "00 00 00 00 00", 
      "email": "email@email.com", 
      "contract": [ 
       { 
        "id": "1", 
        "gamme": "Gamme 1", 
        "formula": "Formula 1" 
       }, 
       { 
        "id": "2", 
        "gamme": "Gamme 2", 
        "formula": "Formula 2" 
       } 
      ] 
     } 
    ] 
} 

我做整个对象上的第一映射和ko.computed一些DATAS：

var person_mapping = { 
     'value': { 
      create: function (options) { 
       if (options.data != null) { 
        return new myPersonModel(options.data); 
       } 
      } 
     } 
    } 

var myPersonModel = function (data) { 
     ko.mapping.fromJS(data, {}, this); 

     this.fullName = ko.computed(function() { 
      return this.civility() + ' ' + this.lastname() + ' ' + this.firstname(); 
     }, this); 
    } 

执行此操作后，我得到了我想要的第部分：

self.dataModel = ko.mapping.fromJS(persons, person_mapping); 

但现在，我想做同样的事情与合同阵列内的人反对，也就是应用映射，并做一些像ko.computed这个：

var contract_mapping = { 
      'contract': { 
       create: function (options) { 
        if (options.data != null) { 
         return new myContractModel(options.data); 
        } 
       } 
      } 
     } 

var myContractModel = function (data) { 
      ko.mapping.fromJS(data, {}, this); 

      this.contractName = ko.computed(function() { 
       return this.gamme() + ' ' + this.formula(); 
      }, this); 
     } 

但我不知道如何申请我的第二个映射，似乎没有任何工作。

Answer 1

您可以在myPersonModel的第一行应用您的第二个映射。您可以在您使用的每个构造函数中继续嵌套映射策略。

var myPersonModel = function(data) { 
    ko.mapping.fromJS(data, contract_mapping, this); 
    /* ... */ 
}; 

var persons = { 
 
    'value': [{ 
 
    "id": "1", 
 
    "civility": "Mr.", 
 
    "firstname": "john", 
 
    "lastname": "doe", 
 
    "phone": "00 00 00 00 00", 
 
    "email": "email@email.com", 
 
    "contract": [{ 
 
     "id": "1", 
 
     "gamme": "Gamme 1", 
 
     "formula": "Formula 1" 
 
     }, 
 
     { 
 
     "id": "2", 
 
     "gamme": "Gamme 2", 
 
     "formula": "Formula 2" 
 
     } 
 
    ] 
 
    }] 
 
} 
 

 
var contract_mapping = { 
 
    "contract": { 
 
    create: function(options) { 
 
     return new myContractModel(options.data); 
 
    } 
 
    } 
 
} 
 

 
var person_mapping = { 
 
    'value': { 
 
    create: function(options) { 
 
     if (options.data != null) { 
 
     return new myPersonModel(options.data); 
 
     } 
 
    } 
 
    } 
 
} 
 

 
var myContractModel = function(data) { 
 
    ko.mapping.fromJS(data, {}, this); 
 
    this.type = "myContractModel"; 
 
}; 
 

 
var myPersonModel = function(data) { 
 
    ko.mapping.fromJS(data, contract_mapping, this); 
 

 
    this.fullName = ko.computed(function() { 
 
    return this.civility() + ' ' + this.lastname() + ' ' + this.firstname(); 
 
    }, this); 
 
} 
 

 
console.log(
 
    ko.mapping.fromJS(persons, person_mapping) 
 
    .value()[0] 
 
    .contract().map(x => x.type) 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>