JsViews: повторная инициализация шаблона с использованием объекта Deep Copy: ~ root проблема - PullRequest
Новая
       27

JsViews: повторная инициализация шаблона с использованием объекта Deep Copy: ~ root проблема

0 голосов
/ 31 января 2020

Я пытаюсь создать процесс отмены (повторная инициализация шаблона), используя глубокую копию объекта, связанного с данными. Возможно, это не идеальный метод, но я не могу сейчас использовать View Models, merge () и unmap ().

mainObject визуализирует templateA (mainObject, полученный из запроса AJAX, Тип: json )

mainObject = $.extend(true, mainObject, addObject); добавляет дополнительные объекты для редактирования, визуализирует templateB (addObject, полученный из запроса AJAX, тип: json)

Я уже два года без проблем использую два вышеупомянутых шаблона и объекты.

Сейчас ...

Я хочу сделать глубокую копию / клон mainObject в случае, если пользователь отменяет редактирование (двусторонняя привязка к данным).

Когда я создать mainObjectClone = JSON.parse(JSON.stringify(mainObject)) и выполнить повторную визуализацию, используя тот же шаблон, templateB, я получаю ошибки, связанные с контекстом ~root.

Насколько я понимаю, JSON .parse () возвращает объект того же типа как запрос AJAX, введите: json.

Либо объект не возвращается, либо ошибки типа: Uncaught TypeError: Cannot read property '0' of undefined. + ((v = view.ctxPrm ("root"). MyPhotos [j._sq (0)])! = Null? V: "")

с включенной отладкой все части шаблона отображаются нормально, кроме случаев, когда используется ~root.

Странно то, что ~root не работает там, где я определил его в шаблоне ... но при дальнейшем тестировании, если Я добавляю ~root к «другому» объекту верхнего уровня (объекту, который не нуждается в контексте), он там работает странным образом.

Я пробовал это, и все разбиваются на ~root:

  • myObjectClone = $.extend(true, {}, mainObject)
  • Loda sh глубокая копия
  • Также изменяет порядок объектов mainObject, addObject на mainObject = $.extend(true, addObject, mainObject) и прерывает ~root доступ тоже (первый объект расширяется).

Я пытался, но не смог воспроизвести проблему в jsfiddle ... хотя и с ограниченными данными / шаблоном.

Журнал консоли показывает все объекты как правильно сформированные.

Как ~root создается / инициализируется ... на некоторых или на всех объектах?

Какие конфликты кода могут изменить ~root контекст?

Буду признателен за любые советы или указатели.

ОБНОВЛЕНИЕ

Хотя я закомментировал всех помощников, et c, к шаблону + данные (с включенной отладкой) ... проблема ~ root осталась. Это «наконец» привело меня к мысли, что это не имеет ничего общего с шаблоном или данными.

Итак, вот мой сценарий:

  • TemplateA отображается с помощью link () с DataA ( нет проблем)
  • Шаблон B визуализируется с использованием link () с объектом глубокого копирования / клонирования (DataA + DataB) (~ root проблема)
  • Шаблоны A & B совместно используют общие двусторонние данные связанные элементы, хотя и из разных источников данных.

Если я изменю метод рендеринга TemplateA на render () (вместо link ()); и затем визуализировать TemplateB, ~ root контекст работает .

Другой сценарий: вместо рендеринга TemplateB с глубоким объектом копирования / клонирования (DataA + DataB) ... Я объединил данные на сервер и оказал против этого. Это также привело к проблеме контекста ~ root.

Затем я подумал, что, возможно, возникла проблема, когда link () вызывается из нескольких шаблонов, что их объекты с одинаковыми именами конфликтуют. Поэтому я выделил один из общих объектов, переименовал его и представил шаблон теста с изменениями имени .... ~ root Проблема осталась.

Это все, что я знаю на данный момент; -)

1 Ответ

0 голосов
/ 04 февраля 2020

Отвечая на мой собственный вопрос здесь ...

Здесь не было проблем с JsViews ... проблема с ~ root была моего собственного создания; -)

Проблема возникла из-за того, что link () templateB был вставлен в шаблон link () templateA ..., что привело к конфликту с ~ root.

Мои источники данных и шаблоны раньше объединялись ... Я разделил их для тестирования и не думал ясно.

По сути, я делал это: 

<script id="templateA" type="text/x-jsrender">
    <div id="userView">...</div>
    <div id="editView"></div>
</script>

<script id="templateB" type="text/x-jsrender">
    ...
</script>


$.templates("#templateA").link("#userView", dataA)

onClick openEditView...

$.templates("#templateB").link("#editView", $.extend(true, dataA, dataB))

Исправление довольно простое, что-то вроде этого: 

<script id="templateA" type="text/x-jsrender">
    <div id="userView">...</div>
    {{if editable}}
         {{include tmpl="templateB" /}}
    {{/if}}
</script>

<script id="templateB" type="text/x-jsrender">
    ...
</script>


$.templates("#templateA").link("#userView", dataA)

onClick openEditView...

$.extend(true, dataA, dataB))

Это решает проблему ~ root, а также работают методы объектов глубокого копирования.

...