0

我正在使用带有 jquery mobile 的 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>

这是我的模板.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>

生成的网页确实有一个包含内容的页眉和页脚。但是，页眉非常大且位于左侧（与页脚相同）。如果我只是在 html 中硬编码页眉和页脚，它就可以工作。但是当 jqm 更新 html 时，它的格式不正确。我已阅读添加 .trigger('create') 但不起作用。任何人都可以请帮助，我已经在这方面工作太久了。提前致谢！

约翰

4

2 回答 2

1

感谢大家的帮助和建议。我终于从谷歌上的各种来源和答案中弄清楚了该怎么做。我必须在我的脚本之前创建一个空的 div（顺便说一下，我发现 jqm 不会在后续页面的标题中运行脚本，只在主页上）。我将这个空 div 标记为“id=content”，然后在脚本中调用destroy，然后是page()：

<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>

此外，在我添加“文本”之前，上述内容仅在我的浏览器中有效，而在 android 应用程序中无效（只是 webview 中的空白页面）；作为 get 方法的一部分。

这是我第一次使用 jqm 并开发我的 droid 应用程序。对不起，如果这应该是我应该知道的。很多东西要学... :>

约翰

于 2013-02-06T20:11:04.563 回答
0

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

这是一个相关的问题：jQuery Mobile Page refresh mechanism

我会尝试使用这条线：

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

->

$.mobile.activePage.trigger('create')

或类似的规定。

理想情况下，您要做的实际上是在 DOM 中已经有一个页面，只需将新内容注入其中，然后调用$.mobile.changePage("#pageId");它。

于 2013-02-05T17:01:50.883 回答