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>