注入句柄模板后，jquery移动页面不呈现 [英] jquery mobile page not rendering after injecting handlebars template
问题描述
我们现在正在使用的移动应用程序目前由phonegap，jqm，handlebars和jquery.inherit作为插件组成。这个想法是通过根据需要动态注入/删除模板来创建一个单一页面应用程序。
目前，应用程序有一个index.js，它将所有东西关闭，然后动态加载一些.js文件需要第一个应用程序运行。直到这一点，一切运行得很好。当我们尝试动态地将句柄模板注入html文件时，麻烦就开始了。在单页面应用程序中，我们有：
< body onload =Index.Initialize（）>
< script id =webApp1-templatetype =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））;
}
}）;
对本地文件的调用是成功的，如果提示'响应'，我会看到信息i需要注入，基本上是一个具有jqm data-role =页面的div。然后用id =webApp1-template的脚本填充html内容 - 我可以通过提醒来验证它：
alert（template.html（））;
然后模板被handlebars编译并设置为body的html - 我可以通过提示来验证：
alert（$（'body'）。html（））;
data-role =page和所有但它不在屏幕上显示 - 屏幕是空白的。
如果我删除
< div data-role =pageclass =pages appid =home>
从我的html被注入，html加载但是不能正确呈现。我的假设是data-role =page需要refreshe d，但是当我尝试时
$（'body'）。trigger（create）;
完全没有任何反应。有没有办法动态加载一个其中有一个div data-role =page的句柄模板？这个想法是在多个页面上有可重复使用的模板，并且这些页面可以动态地相互转换。
谢谢
pagecreate 事件
在DOM中创建页面时触发此事件通过ajax或其他），但在所有小部件之前都有机会增强所包含的标记。这对于用户希望为jQuery Mobile小部件的子标记增强功能创建自己的定制小部件而言非常有用。
the mobile application we are working on right now consists of phonegap, jqm, handlebars and jquery.inherit as plugins so far. The idea is to make a single page application by dynamically injecting/removing templates as needed.
Currently, the application has an index.js which kicks everything off, then dynamically loads some .js files needed for the first application to run. Up until this point, everything runs perfectly fine. The trouble starts when we try to dynamically inject a handlebars template into the html file. In the single-page application, we have:
<body onload="Index.Initialize()">
<script id="webApp1-template" type="text/x-handlebars-template">
</script>
</body>
As mentioned, the Initialize loads some files and then calls the Index's constructor to initiate the loading of the initial template like so:
Index.objWebApplication1 = new WebApplication1();
The constructor itself will make a local ajax call to retrieve the html needed for injection:
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));
}
});
The call to local file is successful and if the 'response' is alerted, i see the information i need to inject, basically a div with a jqm data-role="page etc. The script with the id="webApp1-template" is then filled with the html content - i can verify this by alerting:
alert(template.html());
The template is then compiled by handlebars and set as the body's html - i can verify this by alerting:
alert($('body').html());
and i see the div with the data-role="page" and all BUT it does not render on screen - the screen is blank.
If i remove the
<div data-role="page" class="pages app" id="home">
from my html which is being injected, the html loads but is not rendered properly. My assumption is that the data-role="page" needs to be "refreshed" but when i try
$('body').trigger("create");
absolutely nothing happens. Is there a way to dynamically load a handlebars template which has a div data-role="page" within it? The idea is to have reusable templates over multiple pages and have these pages transition between each other dynamically.
thanks
You can use $('#your-page-id').trigger('pagecreate') to trigger the pagecreate event.
This event is triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. It is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jQuery Mobile widgets do.
这篇关于注入句柄模板后，jquery移动页面不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
