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：これを実行した後

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

しかし、私は私の第2のマッピングを適用する方法がわからない、何も動いていないようにみえ。

Answer 1

myPersonModelの最初の行に2番目のマッピングを適用できます。あなたは、使用しているすべてのコンストラクターにマッピング戦略を入れ子にしておくことができます。

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>