jquerymobile html5-де серверлік сценарийлерді қолданбай қайта жазылатын кодты қалай жазуға болады?

jquery ұяшығындағы файлдарды кез келген жерде артық кодты жазудың орнына кейбір кодты қайта қолдануға болатын кез келген әдіс бар ма?

Әр беттегідей, менде үй батырмасы және артқы түйме болуы керек .... бұл файлда оларды көрсете алатын және оларды әр бетте жазуға болатын тәсіл бар. Мен javascript-ді қолдану арқылы қиындықты білемін ... div = «header» деп қоюға және кейінірек мазмұнды қосатын сценарийді қосуға болады ...

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

Кез-келген көмекті бағалайды ...

3
Сіз мұны жақсы жолмен таптыңыз ба?
қосылды автор farjam, көзі
@farjam ..... мен handlebarsjs.com пайдалануды бастадым ... мен оны шаблондау үшін жақсы жұмыс істегендіктен таптым
қосылды автор Kiran Ruth R, көзі

2 жауаптар

Егер сіз HTML ( .html ) беттерді пайдаланып жатсаңыз және Сервер Қоспасының Қосылымы жоқ болса, JavaScript үлгісін (ол тым қиын емес) пайдалануға болады. JavaScript арқылы үлгілеудің қосымша артықшылығы, беттер жылдамырақ жүктелетіндіктен, сымды деректерді берудің аздығы. Егер бір нәрсені қайта-қайта кодтауды тапсаңыз, үлгілерді пайдалану жақсы идея.

Мазмұнды 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: iframe көрінуі тиіс, ол бұл бөлігі болып табылады   құжатты қамтитын

<div data-role="header">

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

</div><!-- /header -->
3
қосылды
HTML5 спецификациясы үшін жаңартылған <iframe> тегті есіме түсірді, ол seemless атрибутын қамтиды, менің жауапыма қосқан сілтемесін тексеріңіз.
қосылды автор Jasper, көзі
Ешқандай html 5 файлы сияқты емес пе? ... Мен осы екі жолдан хабардармын ... бірақ JQuery-тің бұл тәсілі сәл қызық емес. Дегенмен, ол жұмыс істейді ... Көмек үшін алғыс Jasper :) ...
қосылды автор Kiran Ruth R, көзі
салқын ... мен оны тексеремін ...
қосылды автор Kiran Ruth R, көзі
Үздіксіз iframe өте жақсы жұмыс істемейді, себебі мазмұн жақсармайды. Бұл шешім мен үшін жұмыс істемеді, бірақ мені дұрыс бағытта көрсетті, рахмет! Мен төменде жұмыс істейтін шешімді орналастырамын. Сұрақ қойылғаннан бері ұзақ уақытқа созылғанына қарамастан, бұл JQM мәселесі болып қалуда және мен мұны дұрыс жолмен анықтауға уақыт алдым.
қосылды автор jtblin, көзі

Міне, Джас үлгісінің қағидасы бойынша Джаспердің сұрағына негізделген шешім. «Жүктеу» немесе ұқсас техниканы пайдаланатын ұқсас сұрақтарға жауаптардың барлығы дұрыс емес, өйткені html дұрыс емес және басқа да мәселелерді жақсартпайды.

$(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
қосылды