Question

我们正在开发的移动应用程序目前包含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”的把手模板？我们的想法是在多个页面上拥有可重复使用的模板，并让这些页面在动态之间相互转换。

感谢

Answer 1

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

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

注入车把模板后，jquery移动页面无法渲染

1 个答案: