Как лучше изменять два похожих элемента на странице?

Question

[Владислав]

Есть некий "главный" список, у каждого элемента этого списка есть возможность поставить лайк или дизлайк. Так же на странице есть сайдбар, в котором видна активность по последним поставленным лайкам и дизлайкам, т.е. тоже маленький список.
Список в сайдбаре лишь частично повторяет "главный" список и в нём видно только ту кнопку, которая была нажата пользователем, т.е. либо лайк, либо дизлайк.
html приблизительно такой:

Главный список:
<div class="list">
	<div class="list__item">
		<span>text 1</span>
		<!-- other code -->
		<div class="vote">
			<button class="vote__up active"></button>
			<div class="vote__rating">1</div>
			<button class="vote__down"></button>
		</div>
	</div>
	<div class="list__item">
		<span>text 2</span>
		<!-- other code -->
		<div class="vote">
			<button class="vote__up active"></button>
			<div class="vote__rating">5</div>
			<button class="vote__down"></button>
		</div>
	</div>
	<div class="list__item">
		<span>text 3</span>
		<!-- other code -->
		<div class="vote">
			<button class="vote__up"></button>
			<div class="vote__rating">-3</div>
			<button class="vote__down active"></button>
		</div>
	</div>
</div>

Список в сайдбаре:
<ul class="list">
	<li class="list__item">
		<span>text 1</span>
		<div class="vote">
			<button class="vote__up active"></button>
		</div>
	</li>
	<li class="list__item">
		<span>text 2</span>
		<div class="vote">
			<button class="vote__up active"></button>
		</div>
	</li>
	<li class="list__item">
		<span>text 3</span>
		<div class="vote">
			<button class="vote__down active"></button>
		</div>
	</li>
</ul>

Задача:
При изменении голоса в "главном" списке, необходимо менять голос и в списке сайдбара.
Как это реализовано мной:
Полный код JS приводить не буду, так как он не особо важен. В данный момент у меня вешается событие на кнопку типа data-toggle="vote", создаётся экземпляр класса Vote и идёт обработка, изменяется состояние кнопки на active, отправляются данные на бэкэенд. Затем в сайдбаре ищется похожая запись и изменяется. Я думаю что это плохая реализация, и можно (нужно) сделать лучше.

Вопрос:
Какой подход лучше использовать для такой задачи?

Answer 1

[Алексей Уколов]

Лучший подход для этой задачи - иметь одну коллекцию моделей и рендерить ее в двух местах с разными шаблонами. В шаблоне следить за изменением модели и перерендеривать его в нужный момент.
Для этого хорошо подойдет Backbone.

Comments

[Владислав]

Имеет ли смысл использовать Backbone, если у меня в проекте только две подобные задачи? Т.е. не будет ли это тоже самое, что использовать фреймворк для создания одностраничного сайта?