Обновление HTML через JSON / AJAX

Question

Я использую JSON для обработки функциональности AJAX в моих приложениях rails с тех пор, как услышал об этом, потому что использование RJS / рендеринга HTML "чувствовало" неправильно, потому что нарушало MVC. Первый AJAX-проект, над которым я работал, закончился 20-30 действиями контроллера, привязанными непосредственно к определенному поведению пользовательского интерфейса, и мой код представления распространился по действиям контроллера, частичным файлам и файлам rjs. Использование JSON позволяет вам сохранять вид конкретного кода в представлении и общаться только для просмотра действий контроллера с независимой / RESTful через AJAX для получения необходимых данных.

Единственная головная боль, которую я обнаружил при использовании чистого JSON, заключается в том, что вам приходится «рендерить» HTML через JS, что в случае с AJAX, который должен обновлять DOM-тяжелые элементы, может быть настоящей болью. Я получаю длинный строительный код типа

// ...ajax 
success: function(records){
  $(records).each(function(record){
    var html = ('<div id="blah">' + record.attr +
      etc +
    ')
  })
}

, где и т. Д. - это 10-15 строк динамического построения HTML на основе данных записей. Помимо раздражения, более серьезным недостатком этого подхода является дублирование структуры HTML (в шаблоне и в JS). * Есть ли лучшая практика для этого подхода?

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

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

Answer 1

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

Есть много решений, например, посмотрите Джона Резига (создатель jQuery):

http://ejohn.org/blog/javascript-micro-templating/

Answer 2

Я хотел бы создать HTML-структуру, содержащую заполнители для элементов, которые необходимо обновить через AJAX. Какая структура применяется, зависит от того, что вы обновляете; если вы знаете количество элементов, которые у вас будут заранее, это будет что-то с эффектом

<div id="article1">
    <div id="article1Headline"></div>
    <div id="article1Copy"></div>
    <div id="article1AuthorInfo"></div>
</div>
<div id="article2">
    <div id="article2Headline"></div>
    <div id="article2Copy"></div>
    <div id="article2AuthorInfo"></div>
</div>

Затем вы пишете код, который напрямую ссылается на идентификатор каждого элемента и вставляет его в свойство .innerHTML (или любой другой синтаксически более сладкий способ, которым jquery делает то же самое). ИМХО, на самом деле не так страшно назначать содержимое каждого элемента, часть, которую вам не нужно разбрасывать через ваши AJAX-функции, - это сама структура HTML; в вашем приложении контент все равно изменчив.

Тем не менее, похоже, что у вас может быть список с неизвестным количеством элементов, в этом случае может потребоваться просто вставить заполнитель:

<div id="articleList"></div>

В этом случае я не вижу способа избежать построения структуры HTML в вызовах javascript, но разумное количество декомпозиции вашего javascript должно помочь в этом:

function addArticle( headline, copy, authorInfo, i ){
    createDiv( "article" + i + "Headline", headline );
    createDiv( "article" + i + "Copy", copy);
    createDiv( "article" + i + "AuthorInfo", authorInfo );
}

(конечно, не рабочий код, но вы поняли)

Answer 3

Вы можете использовать функцию загрузки в jQuery; Это загружает содержимое страницы в div следующим образом:

$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse);

Просто создайте динамический вид, и все готово ...

Answer 4

Так уж получилось найти именно то, что я искал: Jaml