1

到目前为止，我们正在开发的移动应用程序包括 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" 的车把模板？这个想法是在多个页面上拥有可重用的模板，并让这些页面在彼此之间动态转换。

谢谢

4

1 回答 1

1

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

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

于 2013-06-29T21:34:14.750 回答