Non*_*one 4 markup jquery jquery-mobile handlebars.js jquery-mobile-listview
所以,标题是不言自明的.我正在尝试使用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移动:
<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');
非常感谢任何形式的帮助!
你的代码中有很少的错误,我会用解决方案解释一切.
让我们稍微改变你的页面:
<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上触发listview刷新.如果ul元素直接附加到div #articleHandlebars,请尝试:
$("#articleHandlebars ul").listview('refresh');
或深入到达ul标签.但根据我的经验,它不会起作用,因为您的列表视图是动态生成的,因此您需要在刷新之前初始化listview.因此,如果顶级解决方案无效,请尝试以下方法:
$("#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');
}
| 归档时间： |
|
| 查看次数： |
4619 次 |
| 最近记录： |