Aktualizowanie HTML za pomocą JSON/AJAX

Question

Używam JSON do obsługi funkcji AJAX w moich aplikacjach railsowych, odkąd słyszałem o tym, ponieważ używanie RJS/rendering HTML "czuł" źle, ponieważ naruszało MVC. Pierwszy ciężki projekt AJAX, nad którym pracowałem, zakończył się 20-30 czynnościami kontrolera związanymi bezpośrednio z określonymi zachowaniami UI, a mój kod widoku rozłożył się na akcje kontrolerów, częściowe i pliki rjs. Korzystanie z JSON pozwala zachować widok określonego kodu w widoku i tylko mówić, aby wyświetlić agnostyczne/RESTful działania kontrolera za pośrednictwem AJAX, aby uzyskać potrzebne dane.

Jedynym bólem głowy, jaki odkryłem podczas używania czystego JSON-a, jest to, że musisz "renderować" HTML przez JS, co w przypadku AJAX, który musi aktualizować elementy DOM-ciężkie, może być prawdziwym bólem. Kończę się długim kodem budowania ciągów takich jak:

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

gdzie itd. To 10-15 linii dynamicznie konstruujących HTML na podstawie danych rekordów. Oprócz irytacji, poważniejszą wadą tego podejścia jest powielanie struktury HTML (w szablonie i JS). * Czy istnieje lepsza praktyka dla tego podejścia?

(Moja motywacja na końcu dotarcia to jestem teraz zadanie aktualizowania HTML tak skomplikowane to wymagało dwóch zagnieżdżonych pętli kodu Ruby, aby uczynić w pierwszej kolejności. Powielanie, że w JavaScript wydaje się szalony.)

• Jedną z rzeczy, którą rozważałem, jest ładowanie statycznych plików częściowych bezpośrednio z systemu plików, ale wydaje się to trochę za duże.

Answer 1

właśnie stało się znaleźć dokładnie to, czego szukałem: Jaml

Answer 2

Można użyć funkcji ładowania w jQuery; ten wczytuje zawartość strony do div jak to:

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

prostu zrobić dynamiczny obraz i jesteś dobry, aby przejść ...

Answer 3

pójdę z tworzeniem struktury HTML, która zawiera zastępcze dla elementów, które musisz zaktualizować za pośrednictwem AJAX. Jaka struktura ma zastosowanie, zależy od tego, co aktualizujesz; jeśli wiesz liczbę elementów będzie trzeba z wyprzedzeniem, to byłoby coś do skutku

<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> 

następnie napisać kod, który odwołuje się do identyfikatora każdego elementu bezpośrednio, a następnie podłączany do nieruchomości .innerHTML (lub jakikolwiek syntaktycznie bardziej słodki sposób, w jaki JQuery robi to samo). IMHO, nie jest tak strasznie, że trzeba przypisać zawartość każdego elementu, część, której nie chcesz posypywać swoimi funkcjami AJAX, to sama struktura HTML; w Twojej aplikacji treść jest niestabilna.

Jednak wygląda na to, że możesz mieć listę nieznanej liczby elementów, w tym przypadku może się okazać, że trzeba by po prostu umieścić w zastępczy:

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

W takim razie ja tak naprawdę nie zobaczyć sposób, aby uniknąć budowania struktury HTML w zaproszeniach JavaScript, ale rozsądny rozkład JavaScript powinno pomóc, że:

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

(kod nie działa oczywiście, ale masz pomysł ,)

Answer 4

Podoba mi się idea szablonowania. Z mojego doświadczenia wynika, że ​​potrafi naprawdę uprzątnąć tę niechlujną manipulację ciągami!

Istnieje wiele rozwiązań, na przykład, sprawdź Johna Resig za (twórca jQuery):

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