淘汰制映射插件 - 使所有对象可观察

Posted 2023-03-27

【中文标题】淘汰制映射插件 - 使所有对象可观察

【英文标题】：Knockout mapping plugin - making all objects observable

【发布时间】：2018-10-13 18:27:24

【问题描述】：

我有以下 Knockout 视图模型：

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 映射插件进入我的视图模型如下：

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

这基本上给我留下了以下视图模型对象层次结构：

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

问题在于“destCourse”对象仍然是一个对象，并没有被转换为可观察的（尽管 destCourse 对象中的每个属性都被转换为可观察的）。

如何使所有子对象的数据也转换为可观察的？理想情况下尽可能采用最通用的方式？

【问题讨论】：

请看这个问题：***.com/questions/10555115/…。 :-)

【参考方案1】：

我以前遇到过这种情况，但我一直无法弄清楚为什么敲除对子对象会这样做。

不管怎样，你只需要给mapper一点指导as described in the docs

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


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

这是一个sn-p：

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>

【讨论】：

您可以将您的答案添加到这个问题：***.com/questions/10555115/…。 :-)

效果很好——我希望所有的解决方案都这么简单。非常感谢:)