hoe herbruikbare code te schrijven in jquerymobile html5 zonder server side scripting?

is er een manier waarop ik bestanden in jQuery-mobiel kan opnemen, waardoor sommige code herbruikbaar is in plaats van overal redundante code te schrijven?

Zoals voor elke pagina moet ik een startknop en een terugknop hebben .... is er een manier waarop ik deze in een bestand kan specificeren en deze op elke pagina kan opnemen. ik weet een moeilijke manier om dit te doen met behulp van JavaScript ... waar ik een div = "header" kan plaatsen en een script kan bevatten dat later inhoud zal toevoegen ...

    <div id="bookHotels" data-role="page">

    <div data-role="header">

            -----   include the header file to to make it reusable ----

    </div><!-- /header -->

    <div data-role="content">   
    </div><!-- /content -->

    <div data-role="footer">
            

footer text

    </div><!-- /footer -->
</div><!-- /page -->

Alle hulp wordt gewaardeerd ...

3
Heb je ooit een goede manier gevonden om dit te doen?
toegevoegd de auteur farjam, de bron
@farjam ..... ik ben begonnen met het gebruik van handlebarsjs.com ... ik vond het persoonlijk beter werken voor sjabloneren
toegevoegd de auteur Kiran Ruth R, de bron

2 antwoord

Als u HTML-pagina's ( .html ) gebruikt en geen bijvoegsels aan de zijkant bevat, kunt u een JavaScript-sjabloon gebruiken (wat niet al te moeilijk is). Een bijkomend voordeel van sjabloneren met JavaScript is dat er minder over-the-wire-gegevens worden overgedragen, zodat de pagina's sneller worden gedownload. Het is een goed idee om sjablonen te gebruiken als je merkt dat je hetzelfde steeds opnieuw codeert.

Hier is een voorbeeld van het toevoegen van inhoud aan de kop van elke pagina wanneer de pagina is gemaakt door jQuery Mobile:

$('[data-role="page"]').live('pagecreate', function() {
    var $header = $(this).children('[data-role="header"]');
    $header.html('<div data-role="navbar">
</div>').trigger('create');
});

Another option is to use <iframe> tags with the seemless attribute (added in the HTML5 specification). Here is a doc link: http://www.w3schools.com/html5/tag_iframe.asp

Seemless: geeft aan dat het iframe eruit zou moeten zien als onderdeel van het   document bevatten

<div data-role="header">

        <iframe seemless="seemless" src="/path/to/header.html"></iframe>

</div><!-- /header -->
3
toegevoegd
Ik herinnerde me de bijgewerkte <iframe> -tag voor de HTML5-specificatie, deze bevat het naadloze -attribuut en vink de link aan die ik aan mijn antwoord heb toegevoegd.
toegevoegd de auteur Jasper, de bron
Nee, er is geen html 5 inclusief zoals php? ... ik ben me bewust van deze twee manieren ... maar gewoon nieuwsgierig is niet de manier van jQuery om het een beetje raar te doen. Niettemin werkt het ... Bedankt voor de hulp Jasper :) ...
toegevoegd de auteur Kiran Ruth R, de bron
cool ... ik zal het bekijken ....
toegevoegd de auteur Kiran Ruth R, de bron
Naadloos iframe werkt niet erg goed omdat inhoud niet wordt verbeterd. Deze oplossing werkte niet zoals het is voor mij, maar wees me in de goede richting, bedankt !!! Ik zal de oplossing die hieronder werkt voor mij posten. Hoewel het lang geleden is dat de vraag werd gesteld, is het nog steeds een probleem met JQM en het kostte me enige tijd om erachter te komen hoe dit het beste kon worden gedaan.
toegevoegd de auteur jtblin, de bron

Hier is de oplossing die voor mij werkte op basis van het antwoord van Jasper met behulp van het js-sjabloonprincipe. Alle andere antwoorden op vergelijkbare vragen die 'load' of vergelijkbare technieken gebruiken, werken niet correct omdat de html niet correct wordt verbeterd en andere problemen.

$(document).on('pagebeforecreate', function() {
   //use document so that it triggers for all new pages
   //use pagebeforecreate so that JQM can enhance the html after it is inserted in the DOM
   //use 'on' instead of 'live' as 'live' is deprecated and does not work in jQuery 1.9.1
   //$(this) is the current document here so have to use 'find' instead of 'children'
    $(this).find('[data-role="header"]').each(function() {
       //$(this) is now the header
       //if we have already inserted the html, we should not do it anymore
        if ($.trim($(this).html()) === "") $(this).html('<div data-role="navbar">
</div>');
    });
});
0
toegevoegd