Реагировать - Отсылать JSON как объекты пользовательского интерфейса и разрешать любые изменения этих объектов пользовательского интерфейса для обновления JSON. - PullRequest
Новая
       28

Реагировать - Отсылать JSON как объекты пользовательского интерфейса и разрешать любые изменения этих объектов пользовательского интерфейса для обновления JSON.

0 голосов
/ 17 февраля 2019

У нас есть внутренняя система инструментов, которая использует JSON для задания различных действий, задач и т. Д. Я создаю одностраничное веб-приложение для визуализации этой информации.Веб-приложение содержит текстовую область для редактирования / вставки JSON и другую область, которая отображает JSON в элементы пользовательского интерфейса.

Поэтому я хочу взять JSON из текстовой области и визуализировать его.Но я также хочу, чтобы пользователь мог взаимодействовать с этой визуализацией рендеринга, вносить изменения / настройки параметров и немедленно обновлять JSON.Я думаю, что это можно назвать двусторонним связыванием.

Хотя переход с JSON -> HTML DOM-элементов прост, я не уверен, как сделать обратное и перейти к DOM -> JSON.Допустим, у нас есть JSON 

{"task1" : { 
  "canFail" : true, 
  "autoRestart" : false, 
  "connectionPropertys" : { 
    ... }
}
}

. Я бы визуализировал task1 как некоторый элемент пользовательского интерфейса с флажками для canFail и autoRestart.Я хочу, чтобы пользователь мог как

  1. редактировать значение JSON "canFail" в значение "true" или "false", и сразу отображать его (это легко - просто перерисовать весь JSON))
  2. установите или снимите флажок canFail и автоматически обновите JSON (сложная часть - где я застрял)

В React мы передаем состояние / свойства дочерним элементамтаким образом, компонент, разыскивающий флажок (и), будет знать только о canFail или autoRestart ... он может не знать о «task1».Если флажок изменен, конечно, у меня может быть запущена какая-то функция-обработчик, но он на самом деле не знает, какой ключ / значение в JSON это соответствует (например, он ничего не знает о task1 и может быть несколько task1s).

Интересно узнать, какой хороший подход будет здесь для решения этой проблемы.Спасибо:)

...