Mobx의 깊은 객체 관찰

Question

나는 깊은 json 객체 구조 (예 : 트리) 데이터 트리를 @observable로 구현하는 가장 좋은 방법을 찾고 있습니다. 데이터 트리가 실제로 깊어 질 수 있습니다. 각 노드에는 많은 속성이 있지만 트리 노드에는 하나의 속성 만 관찰해야합니다. 간단히하면

@observable questionnaire = {} 

작동하지만 허리라고 생각합니다. 나는 단지 'selected'속성을 관찰 할 필요가있다. 여기 json 구조가 있습니다. 설문지 개체가 간소화되어 있으면 내가 정정 해주세요. new Node(json) :

class Node { 
    @observable selected = false; 
    @observable childNodes = asFlat([]); 

    constructor(data) { 
    // Recursively create `Node` objects for all children. 
    data.childNodes = data.childNodes.map(child => new Node(child)); 
    Object.assign(this, data); 
    } 
} 

그런 다음 당신은 당신의 최상위 JSON 개체에서 Node 객체를 생성 :

[ 
    { 
    "id": "1", 
    "title": "level 1", 
    "description": "text", 
    "type": "Question", 
    "selected": false, 
    "childNodes": [ 
     { 
     "title": "level 2", 
     "description": "text", 
     "type": "Question", 
     "selected": false, 
     "childNodes": [ 
      { 
      "title": "level 3", 
      "description": null, 
      "type": "Question", 
      "selected": false, 
      "childNodes": [ 
       { 
       "title": "level 4 1", 
       "childNodes": [], 
       "description": null, 
       "type": "Checkbox", 
       "selected": false 
       }, 
       { 
       "title": "level 4 2", 
       "childNodes": [], 
       "description": null, 
       "type": "Checkbox", 
       "selected": false 
       }, 
       { 
       "title": "level 4 3", 
       "childNodes": [], 
       "description": null, 
       "type": "Checkbox", 
       "selected": false 
       }, 
       ... 
      ] 
      }, ... 

Answer 1

한 가지 방법은 다음과 같이 Node 클래스를 구현하는 것입니다.

이 솔루션은 selected 및 childNodes만을 관찰합니다. Node 개체에 json 개체를 래핑해야하므로 이상적이지 않습니다. 그러나 나는 그것을 할 수있는 다른 방법을 생각할 수 없다.