Mobx наблюдаемый глубокий объект

#javascript #json #mobx

#javascript #json #mobx

Вопрос:

Я ищу лучшее решение, как реализовать @observable в глубокой структуре объекта json (например, в дереве), дерево данных может быть действительно глубоким. и каждый узел имеет много свойств, но мне нужно наблюдать только одно свойство в узле дерева. Просто, если я сделаю

 @observable questionnaire = {}
 

это работает, но я думаю, что это талия. Мне нужно наблюдать только свойство ‘selected’.
Вот структура json. Пожалуйста, поправьте меня, если я ошибаюсь, здесь упрощен объект вопросника.

 [
  {
    "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
              },
              ...
            ]
          }, ...
 

Ответ №1:

Один из способов — реализовать Node класс следующим образом:

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

Затем вы создаете Node объект из своего объекта json верхнего уровня : new Node(json) .

Это решение будет только наблюдать selected и childNodes . Это не идеально, потому что вам нужно обернуть ваш объект json в Node objects. Но я не могу придумать другого способа сделать это.

Комментарии:

1. Как вы думаете, если мы начнем наблюдать дочерние узлы, то все свойства в этом узле станут наблюдаемыми?

2. Вы совершенно правы. Нам нужно использовать asFlat модификатор, чтобы предотвратить это. Я обновил свой ответ.

3. Муад Деббар Спасибо за ваш ответ. Я принимаю ваш ответ как решение моей проблемы с минимальными изменениями в вашем коде. Я не думаю, что мне вообще нужна эта строка @observable childNodes = asFlat([]); свойство ‘selected’ будет наблюдаемым каждый раз, когда я «новый узел (дочерний)» . Еще раз спасибо за вашу помощь. 🙂

4. Я рад, что мой ответ был полезен 🙂