您的代码中几乎没有错误，我将用解决方案解释所有内容。
代码更改：
让我们稍微改变一下你的页面：
<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');
}