#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. Я рад, что мой ответ был полезен 🙂