来自ajax的jquery mobile动态html不使用mustache格式化_Jquery_Html_Dynamic_Format_Mustache

来自ajax的jquery mobile动态html不使用mustache格式化

jquery html dynamic

来自ajax的jquery mobile动态html不使用mustache格式化,jquery,html,dynamic,format,mustache,Jquery,Html,Dynamic,Format,Mustache,我正在使用jquerymobile的mustache模板引擎。我不明白为什么我的html不能用jqm正确格式化。这是我的html/脚本： <body> <div id="john" data-role="page"> <div id="header" data-role="header"></div> <div id="content" data-role="content"></div>

我正在使用jquerymobile的mustache模板引擎。我不明白为什么我的html不能用jqm正确格式化。这是我的html/脚本：

  <body>
    <div id="john" data-role="page">
      <div id="header" data-role="header"></div>
      <div id="content" data-role="content"></div>
      <div id="footer" data-role="footer"></div>
    </div>
    <script>
        var data = {
            technique : "Knee Slide Pass",
            steps : ["Step 1", "Step 2", "Step 3"],
            msg : "Hard Works Pays Off"
        };
        $.get('template.html', function(templates) {
            var header = $(templates).filter('#tpl-header').html();
            var content = $(templates).filter('#tpl-content').html();
            var footer = $(templates).filter('#tpl-footer').html();
            $('#header').html(Mustache.to_html(header, data));
            $('#content').html(Mustache.to_html(content, data));
            $('#footer').html(Mustache.to_html(footer, data));
            //$('#footer').html(Mustache.to_html(footer, data)).trigger('create');
            //$this.trigger('create').trigger('refresh').page();

        });
    </script>
  </body>


风险值数据={
技术：“膝盖滑过”，
步骤：[“步骤1”、“步骤2”、“步骤3”]，
味精：“努力工作会有回报”
};
$.get（'template.html'，函数（模板）{
var header=$（模板）.filter（'#tpl header'）.html（）；
var content=$（模板）.filter（'#tpl content'）.html（）；
var footer=$（模板）.filter（'#tpl footer'）.html（）；
$（'#header'）.html（Mustache.to_html（header，data））；
$（'#content'）.html（Mustache.to_html（content，data））；
$（'#footer'）.html（Mustache.to_html（footer，data））；
//$（'#footer'）.html（Mustache.to_html（footer，data））.trigger（'create'）；
//$this.trigger（'create'）.trigger（'refresh'）.page（）；
});

这是我的template.html：

<div id="tpl-header">
  <h1>{{technique}}</h1>
</div>

<div id="tpl-content">
  <ul id="loader">
    {{#steps}}
    <li>
      {{.}}
    </li>
    {{/steps}}
  </ul>
</div>
<div id="tpl-footer">
  <h1>{{msg}}</h1>
</div>


{{技术}

{{{#步骤}

{{.}}

{{/步骤}

{{msg}}

生成的网页确实有包含内容的页眉和页脚。但是，页眉非常大，并且在左侧（与页脚相同）。如果我只是用html硬编码页眉和页脚，它就可以工作了。但是当jqm更新html时，它的格式不正确。我已经阅读了add.trigger（'create'），但不起作用。有谁能帮忙吗，我已经在这方面工作太久了。提前谢谢

约翰

这绝对是一个“刷新页面”的问题。请记住，jQM实际上在页面加载时对页面进行自己的“解析”，这就是最初美化一切的方式。因此，在添加DOM节点或内容时，必须确保让jQM知道

这里有一个相关的问题：

我试着用这句台词：

$this.trigger('create').trigger('refresh').page();

或者类似的东西

理想情况下，您要做的实际上是在DOM中已经有一个页面，只需将新内容注入其中，然后调用

$.mobile.changePage（“#pageId”）在上面。
谢谢大家的帮助和建议。我终于从谷歌上的各种资源中找到了答案。我必须在脚本之前创建一个空div（顺便说一下，我发现jqm没有在后续页面的标题中运行脚本，只在主页上运行）。我将这个空div标记为“id=content”，然后在脚本中调用destroy，然后是page（）：

风险值数据={
技术：“膝盖滑过”，
步骤：[“步骤11”、“步骤22”、“步骤3”]
};
$.get（'template.html'，函数（模板）{
var content=$（模板）.filter（'#tpl'）.html（）；
$（'#content'）.html（Mustache.to_html（content，data））；
$（“div[data role=page]”）。page（“destroy”）.page（）；
}“文本”）；

此外，在我添加“文本”之前，上述内容仅在我的浏览器中有效，而在android应用程序中无效（只是webview中的空白页）；作为get方法的一部分
这是我第一次使用jqm开发droid应用程序。对不起，如果这是我应该知道的事情。要学的东西很多…：>
John您能显示它正在创建的HTML吗？
$.mobile.activePage.trigger('create')

<body>
    <div data-role="page" data-add-back-btn=true>
      <div id="content"></div>
      <script>
        var data = {
            technique : "Knee Slide Pass",
            steps : ["Step 11", "Step 22", "Step 3"]
        };

        $.get('template.html', function(template) {
            var content = $(template).filter('#tpl').html();
            $('#content').html(Mustache.to_html(content, data));
            $("div[data-role=page]").page("destroy").page();
        },"text");
      </script>
    </div>
  </body>