Рендеринг двух массивов, связанных по идентификаторам, с двусторонней привязкой данных - PullRequest
Новая
       23

Рендеринг двух массивов, связанных по идентификаторам, с двусторонней привязкой данных

0 голосов
/ 10 мая 2019

Я создал этот элементарный инструмент для создания Меню , в котором может быть присоединено несколько / идентичных Исходных элементов (от 1 до многих). На самом деле это не слияние, потому что мне нужно, чтобы Исходные элементы были редактируемыми, а данные связывались со всеми его экземплярами в Меню . Это включает в себя два массива: один Источник и другой для Меню , где общий идентификатор соединяет элементы и идентификаторы для их подпунктов. Меню включает в себя входы для переопределения / настройки.

Проблема, с которой я сталкиваюсь, заключается в обновлении данных при внесении изменений. Мне пришлось прибегнуть к использованию $.templates("#myTmpl").link("#renderMenu", data) в двух разных местах при изменении данных. Это не идеально, так как все перерисовывает; хотя в моем случае все в двухсторонней связи данных, так что без потерь. view.refresh() тоже не работает

Я думаю, что проблема в том, что itemVar не обновляется при изменении базовых данных ... itemVar для однопроходного рендеринга из того, что я понимаю. Я также пробовал помощников вместо itemVar, как ^~items=myItems ... они тоже не работали.

Таким образом, вопрос заключается в том, как вызвать обновление для определенных видов / частей, не прибегая к: <$.templates("#myTmpl").link("#renderMenu", data)>

Для проверки:

  1. Строка комментария 152 $.templates("#menuTmpl").link("#renderMenu", data)
  2. Run
  3. Нажмите Вставьте новый элемент и выберите любой элемент из списка выбора.
  4. Проблема здесь ... он не отображает детали соответствующего элемента из Исходного элемента . Я считаю, что все начинается с itemVar="~currentItem" в строке 8, где itemVar не обновляется и не вызывает обновления. Однако базовые данные изменены.

Возможно, есть лучший способ создать этот инструмент или его части; поскольку он включает в себя немного хитрости (filter ... step=100) и, вероятно, ненужный цикл «для». Я признаю ... мне потребовалось 5 версий, чтобы собрать все вещи вместе.

Любые указатели приветствуются.

Скрипка, показывающая проблемы: https://jsfiddle.net/alnico/mt5d2v7j/
Для отладки есть идентификаторы.

1 Ответ

0 голосов
/ 12 мая 2019

Вы правы в том, что itemVar не обновляется - в том смысле, что если добавляется новый элемент массива, представление для этого элемента не имеет контекстного параметра itemVar (например, ~currentItem в вашем примере).Я исправлю это в следующем обновлении.Я создал проблему здесь https://github.com/BorisMoore/jsviews/issues/424,, и вы можете проверить ее с обновленным файлом jsviews.js, который вы там найдете.

Другая немедленная проблема, с которой вы столкнулись: 

{^{for ~root[1].allItems filter=~menuItem id=id}}

Но фильтр menuItem зависит от id, поэтому его необходимо обновлять при каждом изменении id.Вы можете достичь этого, объявив зависимость от функции menuItem: 

$.views.helpers.menuItem.depends = "id";

или используя mapDepends : 

{^{for ~root[1].allItems filter=~menuItem id=id mapDepends='id'}}

Вы можете немного упростить вещи,удаляя id=id и записывая 

menuItem: function(item, index, items) {
  return item.id == this.view.data.id;
}

Или, что еще лучше, не используйте фильтр для {{for}}, а просто используйте вспомогательную функцию для прямого возврата отфильтрованных элементов: 

getItem: function(id) {
  return data[1].allItems.filter(function(item) {
    return item.id == id;
  });
}

используется следующим образом: 

{^{:#index}}
{^{for ~getItem(id)}}
  {^{if ~currentItem.isNewItem != '1'}}

Если вы это сделаете, вам больше не нужно использовать mapDepends или .depends в вашей функции фильтра.Изменения в id приведут к обновлению {^{for ~getItem(id)}}

...