Jquery mobile 使用分组数据筛选Kendo UI listView

我正在将一个项目从Jquery Mobile转换为Kendo Mobile UI，我希望能够拥有类似于JQM的可过滤列表视图（带有链接）（AutoDividers部分）

我已经阅读了剑道文档，并使用数据绑定实现了一个listview过滤器。尚未使用模板方法。我可以得到链接显示和过滤

我的问题是，如果不为每个分组的数据部分显示一个过滤器，我就无法找出如何将分组的数据标题放入listview

HTML代码

<div data-role="view" data-title="App Index" data-layout="agesLayout" id="App Index" class="defaultView" data-init="initListView">
        <h1>SPEAK App Index</h1>
        <p>This section contains an index of all the activities that can be found within the different age groups. Use the collapsible menu to search for activities within each age group. You can use the &ldquo;Search&rdquo; feature to look for a particular activity. Use meaningful search words.</p>
    <ul id="panelBar">
     <li>0-12 Months Section
       <div>
        <!--<div style="background:#666; color:white; padding:10px; font-size: 0.9em;">Talking Points</div>-->
        <ul id="listview-points" data-type="group"></ul>
       </div>
     </li>
     <li>13mths+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>2.5yrs+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>3.5yrs+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>4.5yrs+ Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
    </ul>
</div>

SPEAK应用程序索引
本节包含在不同年龄组中可以找到的所有活动的索引。使用可折叠菜单搜索每个年龄组内的活动。您可以使用&ldquo；搜索&rdquo；用于查找特定活动的功能。使用有意义的搜索词


0-12个月组


13个月+路段

第一项
第二项
第三项


2.5年+断面

第一项
第二项
第三项


3.5年+断面

第一项
第二项
第三项


4.5年+断面

第一项
第二项
第三项

JAVASCRIPT代码

        <script>
            $(document).ready(function() {
                $("#panelBar").kendoPanelBar();
            });
        </script>

<script type="text/javascript">
    function initListView(e) {
        e.view.element.find("#listview-points").kendoMobileListView({
            filterable: {field: "name", operator: "startswith"},
            template: "<a href='#:data.url#'>#:data.name#</a>",
            dataSource: kendo.data.DataSource.create([
                {name: "Role Models", url: "baby/points/point1.html"},
                {name: "Mother's Voice", url: "baby/points/point2.html"},
                {name: "Body Language", url: "baby/points/point3.html"},
                {name: "Listening", url: "baby/points/point4.html"},
                {name: "Brain Development", url: "baby/points/point5.html"},
                {name: "Gentle Words", url: "baby/points/point6.html"},
                {name: "Television", url: "baby/points/point7.html"},
                {name: "Act on Concerns", url: "baby/points/point8.html"},
                {name: "Home Environment", url: "baby/points/point9.html"},
                {name: "First Five Years", url: "baby/points/point10.html"},
//I WANT TO PUT A HEADER SEPARATOR HERE FOR THE NEXT SECTION
                {name: "Social Activity 1", url: "baby/social/social1.html"},
                {name: "Social Activity 2", url: "baby/social/social2.html"},
                {name: "Social Activity 3", url: "baby/social/social3.html"},
            ])
        });
    }
</script>

$（文档）.ready（函数（）{
$（“#panelBar”）.kendoPanelBar（）；
});
函数initListView（e）{
e、 view.element.find（“#listview点”）.kendoMobileListView({
可筛选：{字段：“名称”，运算符：“startswith”}，
模板：“”，
数据源：kendo.data.dataSource.create([
{名称：“榜样”，url:“baby/points/point1.html”}，
{name:“母亲的声音”，url:“baby/points/point2.html”}，
{name:“肢体语言”，url:“baby/points/point3.html”}，
{name:“listing”，url:“baby/points/point4.html”}，
{name:“大脑发育”，url:“baby/points/point5.html”}，
{name:“温柔的话语”，url:“baby/points/point6.html”}，
{name:“Television”，url:“baby/points/point7.html”}，
{name:“关注点行动”，url:“baby/points/point8.html”}，
{name:“家庭环境”，url:“baby/points/point9.html”}，
{name:“头五年”，url:“baby/points/point10.html”}，
//我想在这里为下一节设置一个标题分隔符
{name:“社交活动1”，url:“baby/Social/social1.html”}，
{name:“社交活动2”，url:“baby/Social/social2.html”}，
{name:“社交活动3”，url:“baby/Social/social3.html”}，
])
});
}

---

我很遗憾地说，我有点不知所措，或者可能无法正确思考。我看不出一个简单的解决办法。有人有什么建议吗？

所以，我对你的代码进行了一些重构。。。我想我会证明这一点

var ds = new kendo.data.DataSource({
 data: [{name: "Role Models", url: "baby/points/point1.html", section:"Header1"},
       {name: "Mother's Voice", url: "baby/points/point2.html", section:"Header1"},
       {name: "Body Language", url: "baby/points/point3.html", section:"Header1"},
       {name: "Listening", url: "baby/points/point4.html", section:"Header1"},
       {name: "Brain Development", url: "baby/points/point5.html", section:"Header1"},
       {name: "Gentle Words", url: "baby/points/point6.html", section:"Header1"},
       {name: "Television", url: "baby/points/point7.html", section:"Header1"},
       {name: "Act on Concerns", url: "baby/points/point8.html", section:"Header1"},
       {name: "Home Environment", url: "baby/points/point9.html", section:"Header1"},
       {name: "First Five Years", url: "baby/points/point10.html", section:"Header1"},
       {name: "Social Activity 1", url: "baby/social/social1.html", section:"Header2"},
       {name: "Social Activity 2", url: "baby/social/social2.html", section:"Header2"},
       {name: "Social Activity 3", url: "baby/social/social3.html", section:"Header2"},
 ],
 group: {field: "section"}
 });

$(document).ready(function() {
            $("#panelBar").kendoPanelBar();
        });

function initListView(e) {
    e.view.element.find("#listview-points").kendoMobileListView({
        template: "<a href='#:data.url#'>#:data.name#</a>",
        dataSource: ds
    });
}

new kendo.mobile.Application();

var ds=new kendo.data.DataSource({
数据：[{name:“Role Models”，url:“baby/points/point1.html”，第节：“Header1”}，
{名称：“母亲的声音”，网址：“baby/points/point2.html”，章节：“Header1”}，
{name:“身体语言”，url:“baby/points/point3.html”，部分：“Header1”}，
{name:“监听”，url:“baby/points/point4.html”，部分：“Header1”}，
{名称：“大脑发育”，网址：“baby/points/point5.html”，章节：“Header1”}，
{名称：“温柔的话语”，网址：“baby/points/point6.html”，章节：“Header1”}，
{名称：“电视”，网址：“baby/points/point7.html”，章节：“Header1”}，
{name:“关注点行动”，url:“baby/points/point8.html”，章节：“Header1”}，
{name:“家庭环境”，url:“baby/points/point9.html”，第节：“Header1”}，
{名称：“头五年”，网址：“baby/points/point10.html”，章节：“Header1”}，
{名称：“社会活动1”，网址：“baby/Social/social1.html”，章节：“Header2”}，
{名称：“社会活动2”，网址：“baby/Social/social2.html”，章节：“Header2”}，
{名称：“社会活动3”，网址：“baby/Social/social3.html”，章节：“Header2”}，
],
组：{字段：“节”}
});
$（文档）.ready（函数（）{
$（“#panelBar”）.kendoPanelBar（）；
});
函数initListView（e）{
e、 view.element.find（“#listview点”）.kendoMobileListView({
模板：“”，
数据源：ds
});
}
新的kendo.mobile.Application（）；

尝试将节：“Header1”和节“Header2”等添加到所需的数据行中，然后使用组：{field:“section”}谢谢您的建议@gro。你能给我举个例子说明它是如何工作的吗？我真的认为不会，因为数据都是从数据源插入到列表中的。谢谢@gro，你我的英雄：D