knockout.js Nhiều ánh xạ trong các đối tượng lồng nhau

Question

Tôi mới với knockout.js và tôi không biết cách tạo nhiều ánh xạ với đối tượng của mình. Đó là dữ liệu của tôi từ máy chủ:

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" 
       } 
      ] 
     } 
    ] 
} 

tôi làm một bản đồ đầu tiên trên toàn bộ đối tượng và ko.computed một số dữ liệu ngay:

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

Sau khi thực hiện điều này, tôi có được những gì tôi muốn cho người đầu tiên một phần:

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

Nhưng bây giờ, tôi muốn làm điều tương tự với mảng hợp đồng bên trong đối tượng người, đó là nói áp dụng ánh xạ và thực hiện một số ko.computed như này:

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

Nhưng tôi không biết cách áp dụng ánh xạ thứ hai của mình, dường như không có gì hiệu quả.

Answer 1

Bạn có thể áp dụng ánh xạ thứ hai của mình trong dòng đầu tiên của myPersonModel. Bạn có thể tiếp tục lồng ghép các chiến lược ánh xạ trong mọi hàm tạo mà bạn đang sử dụng.

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>