jQueryMobileを使用してAJAXを介してサーバーに投稿しています。応答は、Mustacheテンプレートを使用して表示しようとしているJSONとして受信されます。すべてが機能しますが、jQueryは正しくレンダリングされません。たとえば、レンダリングされたテンプレートにクラスやスタイルなどが追加されていません。
テンプレートの読み込みと投稿:
$('#continueToHome').click(function() { // called on button click
// call ajax, send no params, receive json
$.post("http://localhost:3000/app_login.json", "", function(result){
// load template
var template = $('#personTpl').html();
// render data into template
var html = Mustache.to_html(template, result);
// append to page
$('#sampleArea').html(html);
});
// display page
$.mobile.changePage( "#page-homepage", { transition: "slide"} );
});`
html:
<script id="personTpl" type="text/template">
<h1>{{first_name}} {{last_name}}</h1>
Email: {{email}} <br>
<h3>Smifrs</h3>
<ul data-role=listview>
{{#usmifrs}}<li><a href=#>{{name}}</a></li>
{{/usmifrs}}</ul>
</script>
<div id="sampleArea"></div>
問題は、正しく表示されないことです。'data-role =listview'を持つ通常の'ul'要素がある場合、jQueryは'li'タグにclass='ui-listview'、div、およびスタイルを挿入しますが、テンプレートを使用すると、それは発生しません。
どういうわけかページをリロードすることになっていると思いますが、方法がわかりません。
ご協力いただきありがとうございます。