すべてのjQuery Mobileページにテンプレートを使用するには？

Question

見よ：フッターテンプレート：私が持っているすべてのモバイルページで

<!-- Templates --> 
<script type="text/template" id="templateFooter"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
</script> 

：

<div data-role="footer" data-position="fixed">footer</div> 

私は現在、テンプレートをロードしています方法は次のとおりです。

$(function() { 
    $('div[data-role=footer]').html($('#templateFooter').html()); 
    $.mobile.activePage.trigger('create'); 
}); 

これは動作しますが、しかし、私は実際に$（function（）を使用するのが好きではありませんが、の場合はページが表示されますので、読み込む必要がありますので、pageinitやpageshowは役に立ちません。それが何らかの助けになるならば、今後knockout.jsを送ること。

これを行うより良い方法はありますか？

Answer 1

function getTemplateFooter() { 
    //return footer text here 
} 


$("div:jqmData(role='page')").live("pagebeforecreate",function() { 
    // get the footer of the page   
    // if footer doesn't exist on page, insert it where you want it... in this case after role="content"? 
    var $content =$(this).page().find('div:jqmData(role="content")'); 
    $content.after(getTemplateFooter()); 
} 

Answer 2

pageshowのイベントは、ユーザーがなどのバックボタンを押して、ページに移動1件の火災場合でも...それは私がページの多くのためにそれを使用したページのdiv

まで泡こともあり、その後の訪問の間に動的データが変化する可能性があります。