注入车把模板后jQuery移动页面未呈现答案

【问题标题】：jquery mobile page not rendering after injecting handlebars template注入车把模板后jQuery移动页面未呈现
【发布时间】：2013-06-21 20:17:37
【问题描述】：

到目前为止，我们正在开发的移动应用程序包括 phonegap、jqm、handlebars 和 jquery.inherit 作为插件。这个想法是通过根据需要动态注入/删除模板来制作单页应用程序。

目前，该应用程序有一个 index.js，它启动一切，然后动态加载第一个应用程序运行所需的一些 .js 文件。到目前为止，一切运行良好。当我们尝试将把手模板动态注入到 html 文件中时，麻烦就开始了。在单页应用中，我们有：

<body onload="Index.Initialize()">                          
    <script id="webApp1-template" type="text/x-handlebars-template">                    
    </script>                           
</body>

如前所述，Initialize 会加载一些文件，然后调用 Index 的构造函数来启动初始模板的加载，如下所示：

Index.objWebApplication1 = new WebApplication1();

构造函数本身会进行本地 ajax 调用以检索注入所需的 html：

var urlParam = Common.azConstants.WebRoot + "/Modules/WebApplication1/View/WebApplication1/WebApplication1.html";
    $.ajax({
        url : urlParam,
        datatype: 'text/javascript',
        success: function(response, status, jqXHR) {
            var template = $("#webApp1-template").html(response);               
            var webApp1Tpl = Handlebars.compile(template.html());               
            $('body').html(webApp1Tpl);             
        },
        error: function(err){
            alert(JSON.stringify(err));
        }
    });

对本地文件的调用成功，如果“响应”被警告，我会看到我需要注入的信息，基本上是一个带有 jqm data-role="page 等的 div。id="webApp1 的脚本-template" 然后填充 html 内容 - 我可以通过警报来验证这一点：

alert(template.html());

模板随后由把手编译并设置为主体的 html - 我可以通过警报来验证这一点：

alert($('body').html());

我看到了带有 data-role="page" 的 div，但它没有呈现在屏幕上 - 屏幕是空白的。

如果我删除了

<div data-role="page" class="pages app" id="home">

从我正在注入的 html 中，html 加载但未正确呈现。我的假设是 data-role="page" 需要“刷新”但是当我尝试时

$('body').trigger("create");

绝对没有任何反应。有没有办法动态加载其中包含 div data-role="page" 的车把模板？这个想法是在多个页面上拥有可重用的模板，并让这些页面在彼此之间动态转换。

谢谢

【问题讨论】：

你能试试 $('#your-page-id').trigger('pagecreate') 吗？
是的，就是这么简单！非常感谢，效果很好！
不客气。我已添加评论作为答案。你能接受吗？谢谢

标签： templates jquery-mobile handlebars.js

【解决方案1】：

您可以使用$('#your-page-id').trigger('pagecreate') 来触发pagecreate 事件。

当页面在 DOM 中创建（通过 ajax 或其他方式）但在所有小部件有机会增强包含的标记之前触发此事件。对于希望像 jQuery Mobile 小部件一样创建自己的自定义小部件来增强子标记的用户来说，这是最有用的。

【讨论】：