jquery-mobile ドキュメントのリスト ビュー セクションの「Autodividers」セクションで説明されているように、jquery-mobile リストビューの autodividersSelector オプションを使用しようとしています。
リストは正常にレンダリングされますが、仕切りはまったくありません。autodividersSelector に割り当てられた関数が呼び出されることはありません。
ここには jsrender などの複雑な部分が他にもいくつかあるので、そのままにしておきますが、以下にそれらを示しますが、それらが問題の一部であるとは思いません。私は何が欠けていますか?
以下の関連コード:
<div data-role="page" id="myListPage">
<div data-role="content">
<ul id="myListView"
data-role="listview"
data-autodividers="true"
>
</ul>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript">
$( "#myListPage" ).on("pagebeforecreate", function(event) {
renderTemplates();
});
function renderTemplates() {
var data = {
testItems: [
{name:1},
{name:2},
{name:3},
]
};
$('#myListView').html(
$('#myTemplate').render(data)
);
}
/********** FORMATTING **********/
$("#myListPage").on("pagecreate", function (event) {
console.log("pagecreate");
$("#myListView").listview({
autodividers: true,
autodividersSelector: function (li) {
console.log("autodividersSelector");
var out = "hi"; //var out = $(li).find("h3").text;
return out;
}
});
$("#myListView").listview("refresh");
});
/********** FORMATTING **********/
</script>
<script id="myTemplate" type="text/x-jsrender">
{{for testItems}}
<li><a href="#">
<h3>Name: {{:name}}</h3>
<p>Test: {{:name}}</p>
</a></li>
{{/for}}
</script>