jQuery mobile,AJAX,Mustache无法正确呈现

时间:2012-10-05 02:35:28

标签: ajax jquery-mobile mustache

我正在使用jQuery Mobile通过AJAX发布到服务器。 响应作为JSON接收,我试图使用Mustache模板显示。 一切正常但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和样式,但是当我使用我的模板时,它不会发生。

我想我应该以某种方式重新加载页面,但我找不到。

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)