Backbone.js: как мне работать с одной коллекцией в двух отдельных областях интерфейса?

Question

Я надеюсь, что кто-то может помочь мне с вопросом backbone.js. У меня большая часть работы, но я озадачен аспектами архитектуры.

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

Так что с основой это коллекция моделей - все хорошо и хорошо работает до сих пор.

Что я хочу сделать, это позволить людям выбрать (с помощью флажка) отдельные «строки» таблицы (фактически LI) и заставить их перемещаться в область списка в верхней части страницы. Я достиг этого визуально, используя jQuery .slideOut в основной «таблице», а затем используя .slideIn на .clone LI в отдельном UL над главной «таблицей». С точки зрения UX это все работает красиво.

Однако, я думаю, что я ошибаюсь, клонируя «строку», потому что клон больше не является базовой моделью, и если пользователь хочет удалить его из списка, сняв флажок, он должен вернуться в " Таблица'; на данный момент я не знаю, как сказать рассматриваемой модели, чтобы показать себя, потому что я не знаю, как вызвать модель, когда все, что у меня есть, это LI как объект jQuery.

В любом случае, это неправильно. Разве я не должен каким-то образом отображать выбранные модели коллекции в верхнем UL и невыбранные в нижней UL? Как мне это сделать? Или мне нужны две коллекции, и я перемещаю модели от одного к другому?

Я чувствую, что упускаю что-то очевидное и хотел бы помочь! Заранее благодарим за любые отзывы.

qryss

Answer 1

Я думаю, что вы можете сделать две коллекции:

• один за столом (например, tableCollection) со всеми моделями в нем, и
• один для выбранных строк (например, selectedCollection) из таблицы, заполненной только выбранными моделями.

Таким образом, вы должны иметь два триггера в представлении вашей таблицы:

• На выбранной строке: добавить выбранную модель к вашему selectedCollection
• На delselect строки: удалить выбранную модель из вашего selectedCollection

И теперь, когда вы уничтожаете модель в своей основной коллекции (tableCollection), модель также удаляется из вас selectedCollection (если существует там).

Answer 2

Вид имеет ссылку на элемент DOM, поэтому почему вы не можете просто перемещать элемент?

что-то вроде:

if (e.currentTarget.checked) { 

$(this.el).appentTo('#ul1'); 
} else { 
    $(this.el).appendTo('#ul2'); 
}