Плагин Knockout mapping - делает все объекты видимыми - PullRequest
Новая
       37

Плагин Knockout mapping - делает все объекты видимыми

0 голосов
/ 03 мая 2018

У меня есть следующая модель нокаута: 

var myViewModel = {
    courseData: ko.observable(null);
};

Затем я получаю от сервера следующие данные: 

var data = {
  "courses": [
    {
      "srcCourses": [ { "code": "001", "name": "Course 1"}, { "code": "002", "name": "Course 2"} ],
      "destCourse": { "code": "003", "name": "Course 3"}
    },
    {
      "srcCourse": [ { "code": "004", "name": "Course 4"}, { "code": "005", "name": "Course 5"} ],
      "destCourse": { "code": "006", "name": "Course 6"}
    }
  ]
}

Я запускаю через плагин Knockout mapping в мою модель представления следующим образом: 

this.courseData(ko.mapping.fromJS(data));

Это, по сути, оставляет меня со следующей иерархией объектов модели представления: 

{
  KnockoutObservable(this.courseData): {
    KnockoutObservableArray(Courses): [
      {
        KnockoutObservableArray(srcCourses): [ ... ],
        destCourse: { KnockoutObservable(code), KnockoutObservable(name) }
      },
      {
        ...
      }
    ]
  }
}

Проблема заключается в том, что объект destCourse остается объектом и не преобразуется в наблюдаемый (хотя каждое свойство в объекте destCourse преобразуется в наблюдаемый).

Как я могу сделать так, чтобы все дочерние объекты тоже конвертировали данные в наблюдаемые? В идеале самым общим из возможных способов?

1 Ответ

0 голосов
/ 03 мая 2018

Я сталкивался с этим раньше и никогда не мог понять, почему нокаут делает это с дочерними объектами.

В любом случае, вам просто нужно дать руководителю немного указаний , как описано в документации 

var coursesMapping = {
  "destCourse":{
    create:function(options){
      return ko.observable(ko.mapping.fromJS(options.data));
    }
  }
}

var mapped = ko.mapping.fromJS(data, coursesMapping);

Вот фрагмент: 

var data = {
  "courses": [
    {
      "srcCourses": [ { "code": "001", "name": "Course 1"}, { "code": "002", "name": "Course 2"} ],
      "destCourse": { "code": "003", "name": "Course 3"}
    },
    {
      "srcCourse": [ { "code": "004", "name": "Course 4"}, { "code": "005", "name": "Course 5"} ],
      "destCourse": { "code": "006", "name": "Course 6"}
    }
  ]
}

var coursesMapping = {
  "destCourse":{
    create:function(options){
      return ko.observable(ko.mapping.fromJS(options.data));
    }
  }
}

var mapped = ko.mapping.fromJS(data,coursesMapping);

console.log(mapped.courses()[0].destCourse().name()); // "Course 3"
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
...