Ponowne użycie elementów HTML

Piszę statyczną stronę internetową, która używa JQuery do wywoływania niektórych wywołań AJAX do RESTful API i zapełniania strony danymi.Ponowne użycie elementów HTML

Strona działa poprawnie (i szybko), wszystko jest w porządku.

W miarę rozszerzania witryny i dodawania kolejnych stron zauważam, że duplikuję określone regiony na każdej stronie.

Na przykład każda strona ma wspólny element header.

<header>...Some non-trivial content...</header>

Zamiast powtarzać tę definicję na każdej stronie jest jakiś mechanizm, za pomocą którego można zdefiniować tę sekcję raz i to ona w każdym dokumencie.

Pamiętaj, że strony muszą być podawane statycznie, ale można użyć dowolnej standardowej funkcji przeglądarki reklamacyjnej.

Czy istnieje dobry sposób, aby to zrobić, i co to jest lub, czy będę musiał porzucić DRY principles dla tego aspektu kodu po stronie klienta?

Źródło

2013-08-30 Jodrell

Jakiekolwiek ograniczenia dotyczące umieszczania nagłówka w php i umieszczania go na stronach? –

Czy są używane jakiekolwiek silniki widoku? Lub po prostu HTML? – tymeJV

Spójrz na to: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Alvaro

Z pewnością jest kilka sposobów na osiągnięcie tego. Możesz to zrobić za pomocą niektórych funkcji języka po stronie serwera, które pozwalają na umieszczenie zawartości strony na innej stronie lub jeśli nie masz żadnej technologii po stronie serwera, możesz po prostu umieścić ten kod w swoim własnym dokumencie HTML i załaduj zawartość za pomocą AJAX.

w jQuery mogłaby wyglądać następująco:

$('#header').load('header.html');

Jednakże, jeśli isin't zawartości statycznej dla wszystkich stron, zawsze można zdefiniować moduł JS, który byłby odpowiedzialny, aby uczynić ten nagłówek. Moduł może wykorzystywać silnik szablonowy po stronie klienta, taki jak Mustache, Handlebars itd. Jednak nie musisz używać żadnego z nich.

Oto prosty przykład:

DEMO

//in somefile.js, please note that you should namespace your modules 
var Header = { 
    //default config 
    config: { 
     el: '#header', 
     title: 'Some title' 
    }, 

    init: function (config) { 
     var cfg = this.config = $.extend({}, this.config, config); 

     $(cfg.el).html('<h1>' + cfg.title + '</h1>'); 
    } 
}; 

$(function() { 
    Object.create(Header).init({ 
     title: 'Some other title' 
    }); 

    Object.create(Header).init({ 
     el: '#header1', 
     title: 'Yeah' 
    }); 
});

Źródło

2013-08-30 14:05:27 plalx

Jeśli używasz prostego kodu HTML, możesz to zrobić za pomocą komendy SSI include lub poprzez utworzenie strony szablonu i dodanie jej do jQuery. Oba te linki mogą pomóc

Include another HTML file in a HTML file i http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

Źródło

2013-08-30 13:42:23 imbask

Włączenie SSI wymagałoby dynamicznej obsługi na serwerze. – Jodrell

Ponieważ używasz już AJAX wzywa, aby wypełnić swoją stronę z danymi, można zrobić to samo dla wspólnych regionów.

Po prostu przechowuj kod HTML dla tych regionów w oddzielnym pliku i ładuj go na stronie za pomocą AJAX. Ponadto można pracować z buforowaniem przy użyciu nagłówków Cache-Control w tym pliku, aby nie ładować ponownie całej zawartości z serwera przy każdym ładowaniu strony.

Źródło

2013-08-30 13:42:45 dcro

-2

Bardzo prosta byłaby funkcja jQuery .clone().

Jeśli masz bardziej złożone treści, polecam przejrzeć Handlebars.js, który jest pełnoprawnym silnikiem szablonowania JS.

Źródło

2013-08-30 13:42:56

Jak powinieneś "klonować" elementy między stronami? – Johan

Nie widzę, jak to powinno działać, gdy pojawia się nowa strona. –

Można użyć ajax jQuery, aby załadować plik nagłówkowy. W każdym pliku można załadować html tak:

 

$('#header').load('header.html');

Źródło

2013-08-30 13:47:41

Jak wspomniałem w komentarzu, to jak to zrobić:

main.html

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Main page</title> 
     <sript src="http://code.jquery.com/jquery-latest.js"></script> 
     <script> 
      $(function(){ 
        $('#commonsection').load('reusablefile.htm'); 

        // which is eqvivalent to: 
        // 
        // $.ajax({ 
        //  url: 'reusablefile.htm', 
        //  dataType: 'html', 
        //  success: function(data){ 
        //   $('#commonsection').html(data); 
        //  } 
        // }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="commonsection"></div> 
    </body> 
</html>

reusablefile .html:

<script> 
    (function($){ //separate scope to keep everything "private" for each module 
     //do additional javascript if required 
    })(jQuery); 
</script> 
<p>...Some non-trivial content...</p>

Źródło

2013-08-30 13:56:01 Johan

Wygląda to w modest:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <include>reusablePiece</include> 
    </head> 
    <body> 
    <reusablePiece/> 
    </body> 
</html>

reusablePi ece.xml

<header>...Some non-trivial content...</header>

Źródło

2013-09-06 02:49:23 GoalBased

Ponowne użycie elementów HTML

Odpowiedz

Powiązane problemy