jQuery mobile 和 Handlebars答案

【问题标题】：jQuery mobile and HandlebarsjQuery mobile 和 Handlebars
【发布时间】：2013-04-08 19:27:15
【问题描述】：

所以，标题是不言自明的。我正在尝试使用 jQuery mobile 和 Handlebars，但是我遇到了表格的 CSS 或者由把手生成的列表视图的问题。似乎 CSS 被忽略了。

编辑：这是一个实际的例子：http://jsbin.com/adurar/1/edit

在<head> 部分，我有以下代码：

<script id="articles-template" type="text/x-handlebars-template">
<ul data-role="listview" data-autodividers="true"  data-filter="true" data-inset="true">
  {{#entries}} 
    <li><a href="#" onClick="">{{msg}}</a></li>
  {{/entries}}
</ul>
</script>

HTML 的主体是非常直接的 jquery mobile：

<div data-role="page" data-theme="b">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>
          <div id="articleHandlebars" data-demo-html="true"></div>
        </p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

在 .js 文件中我有以下代码：

function showData(data)
{
  var source   = $("#articles-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $("#articleHandlebars").html(html);   
 }

我也试过添加这个没有用：

$("#articleHandlebars").trigger('create');
$("#articleHandlebars").listview('refresh');

非常感谢任何形式的帮助！

【问题讨论】：

与 jqueryui css 相比，您以哪种顺序包含自定义 css？尝试覆盖 jquery ui 样式时，特异性非常重要。
我还没有任何自定义 CSS。问题是，生成的视图没有继承原生的 jquery 移动 CSS。如果我将相同的代码直接插入正文并使列表视图的内容静态，则应用 CSS。但是当我使用把手时，CSS 会被忽略。
告诉我你在什么时候执行函数showData？或者你用什么来执行它，文档准备好还是 jQuery Mobile 页面事件？
我有几个函数，但流程如下： - 一切都从 document.ready 开始，我在其中调用了一个名为“ParseRSS”的函数 - 在 ParseRSS 中，我使用 $.ajax，等等“成功：”我处理返回的数据。创建 JSON 对象数组时，我调用 showData。

标签： jquery jquery-mobile handlebars.js markup jquery-mobile-listview

【解决方案1】：

你的代码几乎没有错误，我会用解决方案解释一切。

代码更改：

让我们稍微改变一下你的页面：

<div data-role="page" data-theme="b" id="listview-page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content"  id="listview-content">   
        <p>
          <div id="articleHandlebars" data-demo-html="true"></div>
        </p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

我已将 ID listview-page 添加到页面容器，并将 ID listview-content 添加到内容容器。我们将在我们的解决方案中使用它。

解决方案：

首先，这一行：

$("#articleHandlebars").listview('refresh');

不起作用，您只能在列表视图小部件或具有属性 data-role="listview" 的 ul elemenet 上触发列表视图刷新。如果 ul 元素直接附加到 div #articleHandlebars 试试这个：

$("#articleHandlebars ul").listview('refresh');

或者深入直到你到达 ul 标签。但是根据我的经验，它不会起作用，因为您的列表视图是动态生成的，因此您需要先初始化列表视图，然后才能刷新它。因此，如果顶级解决方案不起作用，请尝试以下解决方案：

$("#articleHandlebars ul").listview().listview('refresh');

第一个 listview() 调用将初始化小部件，第二个 listview('refresh') 将为其设置样式。

第二件事，你正在使用：

$("#articleHandlebars").trigger('create');

它通常应该在内容 div 上触发，所以如果 listview('refresh') 不起作用试试这个：

$("#listview-content").trigger('create');

这仅在您按照我在此答案开头建议您更改页面时才有效。或者最坏的情况试试这个：

$("#listview-page").trigger('pagecreate');

编辑：

我已经修正了你的例子：http://jsbin.com/ivezat/1/edit

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

        <script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>

<script id="articles-template" type="text/x-handlebars-template">
<ul id="listv" data-role="listview" data-autodividers="true"  data-filter="true" data-inset="true">
  {{#entries}} 
    <li><a href="#" onClick="alert('{{title}}')">{{title}}</a></li>
  {{/entries}}
</ul>
</script>   

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div data-role="page" data-theme="b" id="listview-page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content" id="listview-content"> 
        <p>
          <div id="articleHandlebars" data-demo-html="true"></div>
        </p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


</body>
</html>

Javascript：

$(document).on('pagebeforeshow', '#listview-page', function(){
    parseRSS(); 
});

function parseRSS() {
      var articles = { entries: []};
      for (var i = 0; i <=4; i++)
      {
        var obj = {
          title: "test" + i
        };
        articles.entries.push(obj);
      }
      showData(articles);

}

function showData(data)
{
 var source   = $("#articles-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $("#articleHandlebars").html(html);   
  $("#articleHandlebars ul").listview().listview('refresh');
 }

【讨论】：

不幸的是，这似乎不起作用。我已经按照你的建议做了所有事情，做了所有的组合，但无济于事。
我在原帖中放了一个例子，这里是链接：jsbin.com/adurar/1/edit
您有 2 个问题。首先你可以在 jQuery 之前初始化 jQuery Mobile。并且从未使用 jQuery Mobile 页面准备好的文档。通常它会在内容进入 DOM 之前触发。而是使用 jQM 页面事件，就像在我的修复中一样。
非常感谢！我看到了代码，但我不完全确定我理解您为什么更改包含的顺序...需要详细说明吗？
您也可能对此感兴趣：stackoverflow.com/a/14469041/1848600。这是我关于文档就绪和 jQM 页面事件之间区别的另一个答案。

【解决方案2】：

在附加 JSON 响应后使用此语法

$("your_list_view_id").listview('refresh');

【讨论】：

【解决方案3】：

根据我们在实际项目中使用把手 (1.3.0) 和 jQuery Mobile (1.4.1) 的经验，仅说明一下：

从技术上讲，它按预期工作，您可以使用 jQuery Mobile 提供的任何组件实现您需要的任何 UI。

不过，我们遇到了一些性能问题，这是因为客户端需要进行双重渲染。

我们使用把手模板来生成标记，就像 jQuery Mobile 文档中建议的那样。
在这个渲染过程之后，我们使用.trigger("create"); 来启动jQuery Mobile 的“增强”过程。

使用这种方法在浏览器中的性能并不好，即使后端的 REST 服务响应非常快（在我们的例子中为 20-35 毫秒）。

【讨论】：

【解决方案4】：

工作示例刷新两次。页面，然后是列表视图。一个更好的（对我来说）解决方案是将标签放在模板之外。所以你有了 id，刷新列表视图就可以了。

<!DOCTYPE html> 
<html>

<head>
<meta charset="utf-8">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script>
$(document).bind('pageinit', function () {
    $.mobile.defaultPageTransition = 'none';
});
</script>
</head>     
<body> 

<div data-role="page" data-theme="d"> 
<div role="main" class="ui-content" id="Content">

<button onclick="foo()">render listview</button>

<ul data-role="listview" data-inset="true" id="listviewMenu">
</ul>

<script id="templateLV" type="text/x-handlebars-template">
    {{#.}}<li><a href="#" id="{{cat}}" class="nodeLevel1">{{label}}</a></li>{{/.}}      
</script>

</div><!-- .ui-content -->
</div><!-- Page body -->

<script>
function foo()
{
    var source   = $("#templateLV").html();
    var template = Handlebars.compile(source);
    var context = [{cat: "sample1", label: "Label One"}, {cat: "sample2", label: "Label Two"}]
    var html    = template(context);
    $("#listviewMenu").html(html);
    $('#listviewMenu').listview('refresh');
}
</script>
</body>
</html>

所以你只刷新一次，刷新整个页面时没有那种闪屏效果

【讨论】：