Как использовать JavaScript MVVM / MVC с предварительно загруженными данными

Question

Я хочу загрузить страницу HTML с существующими данными (список комментариев или виджетов или что-то еще), а затем использовать Javascript для отображения дополнительных данных в том же формате, в котором они вводятся пользователями, взаимодействующими со страницей.

1. Я хотел бы использовать модель, хранящуюся в объекте JavaScript, который представляет как существующие данные на странице, так и новые данные из пользовательского ввода, а затем проследить, чтобы модель обновляла DOM при его изменении.
2. Я хотел бы отображать шаблоны JS для быстрого отображения данных, введенных пользователями, без повторного подключения к серверу.

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

Чтобы решить первую проблему построения исходной модели, кажется, что параметры в порядке предпочтения:

• Используйте JavaScript для извлечения данных, отображаемых в HTML, всоздайте исходную модель, или
• визуализируйте JSON непосредственно в DOM и создайте из него объект JS, или
• нажмите сервер сновапосле загрузки страницы в виде AJAX-вызова для получения данных в формате JSON

Чтобы избежать шаблонов на стороне сервера и на стороне клиента для отображения одного и того же:

• Используйте что-то вроде Pure для создания шаблонов из DOM или
• Используйте только шаблоны JS и используйте один из вторых параметров выше для первоначальной визуализации страницы (заполняйте их из JSON, отрисованного вDOM или вызовите ajax, чтобы заставить JSON заполнить их).
• Используйте систему шаблонов, которая работает как на сервере, так и на клиенте.

Мне кажется, что ни одно из этих решений не является особенно элегантным, и мне любопытно, о каких других шаблонах я мог даже не подумать или есть ли общее решение.

Моя среда - Rails 3, но проблемы применимы к любому серверу -> настройка HTML / JS.Я вижу, как это может быть проще с чем-то вроде Node.js, но я в основном заинтересован в решениях, которые применимы к Rails.

Answer 1

Есть так много способов сделать это. Я боролся с этой же проблемой. Я думаю, что как только сложность вашего веб-приложения достигает определенного порога, вы должны прибегнуть к JavaScript, чтобы сохранить правильное состояние. Jquery (среди других платформ dom-манипуляций) действительно помогает, но в определенный момент он может стать спагетти-кодом.

Я только что прикоснулся к этой обязательной библиотеке JavaScript, которая называется Knockout . Это довольно элегантно и просто в использовании. Он пытается следовать шаблону MVVM, позволяя вам создать ViewModel с наблюдаемыми объектами, которые вы можете связать с html-элементами, чтобы их значения и атрибуты изменялись в зависимости от ваших значений ViewModel.

Если вы создаете динамический html, вы всегда можете встроить начальные значения javascript ViewModel вместе с html страницы, чтобы избежать этого начального вызова ajax.

Из коробки он совместим с шаблонами jquery , что делает манипуляцию DOM легкой задачей. Я только начал использовать это, и я люблю это до сих пор.

Надеюсь, это поможет.