Templates 注入Handlebar模板后未呈现jquery移动页面_Templates_Jquery Mobile_Handlebars.js

Templates 注入Handlebar模板后未呈现jquery移动页面

templates jquery-mobile

Templates 注入Handlebar模板后未呈现jquery移动页面,templates,jquery-mobile,handlebars.js,Templates,Jquery Mobile,Handlebars.js,到目前为止，我们正在开发的移动应用程序包括phonegap、jqm、Handlebar和jquery.inherit插件。其思想是通过根据需要动态注入/移除模板来创建单页应用程序目前，该应用程序有一个index.js，它启动所有操作，然后动态加载第一个应用程序运行所需的一些.js文件。到目前为止，一切都很顺利。当我们尝试将一个把手模板动态地注入html文件时，问题就开始了。在单页应用程序中，我们有： <body onload="Index.Initialize()">

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

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

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

构造函数本身将进行本地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 etc”的div。然后，id=“webApp1 template”的脚本将填充html内容-我可以通过发出警报来验证这一点：

alert(template.html());

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

然后，该模板由Handlebar编译并设置为主体的html-我可以通过发出警报来验证这一点：

alert(template.html());

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

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

如果我移除

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

绝对不会发生任何事情。有没有办法动态加载包含div data role=“page”的把手模板？其想法是在多个页面上使用可重用模板，并使这些页面在彼此之间动态转换

谢谢

您可以使用

$（“#您的页面id”）.trigger（'pagecreate'）

来触发

pagecreate

事件

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

您可以使用

$（“#您的页面id”）.trigger（'pagecreate'）

来触发

pagecreate

事件

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