Наблюдаемый список Javascript?

Question

[Igor Fedorov]

Добрый день. Допустим, есть такой объект:

let messList = [
	{	
		peer_id: 58415631,
		photo: "/img/photo1.png",
		name: "Влад Орлов",
		text: "Привет, напиши мне потом",
		date: "вчера в 21:02"
		unread: 0,
		typing: 0
	},
	{	
		peer_id: 898815631,
		photo: "/img/photo2.png",
		name: "Настя Васильчук",
		text: "Здорово!",
		date: "сегодня в 21:02"
		unread: 51,
		typing: 1

	},
	{	
		peer_id: 58415631,
		photo: "/img/photo1.png",
		name: "Влад Орлов",
		text: "Привет, напиши мне потом",
		date: "вчера в 21:02"
		unread: 0,
		typing: 0
	},
	{	
		peer_id: 898815631,
		photo: "/img/photo2.png",
		name: "Настя Васильчук",
		text: "Здорово!",
		date: "сегодня в 21:02"
		unread: 51,
		typing: 1

	}
]

Как его связать c HTML представлением так, чтобы при изменении значений в объекте менялись и данные в DOM, как например и перемещение элементов массива.

Comments

[Максим]

я подписался под твой вопрос , но мне кажется через аякс это делать

[Stalker_RED]

Максим Ленский: при чем здесь ajax? Он вообще про передачу данных на сервер и обратно, а не про слежение за объектами и не про манипуляции с DOM.

[Максим]

Stalker_RED: ааа ! сорри

Answer 1

[Александр Манаков]

Имхо не лучшая идея тащить angular/react если вам нужен только вотчер.
Вот тут написано как сделать полифилл на watch.
Просто вставляете его и делаете

window.watch('messList', (id, old, cur) => {
   someFunctionWithCurValue(cur)
})

Comments

[Igor Fedorov]

Спасибо, скорее всего это именно то, что мне нужно

Answer 2

[developer007]

ангуляр

Answer 3

[Stanislav Gorovoy]

Используйте какую-нибудь реактивную библиотеку, или писать костыли самому

Answer 4

[Леонид]

Вам нужен React

Answer 5

[DoumanAsh]

Исключая стандартный совет использовать React(лучше использовать Inferno/Riot).
Задача данная требует переопределения стандартный методов массива: push/pop и т.п.
Только не советую это делать для прототипа массива.
Так как это довольно трудоемко то использовать существующей библиотеки может быть более выгодным(hint Observable Array).