使用Kendo Mobile List View，如何在HeaderTemplate上设置多个值？

Question

我正在使用Kendo移动列表列表视图。我正在使用DataSource和Grouping。我创建了一个组头模板。我需要在Group Header中显示其他数据。添加此数据的最佳方法是什么？

这是我目前的列表视图的图像：

这是我绘制列表视图的脚本：

     $('#best-in-klas-products-list-view').kendoMobileListView({
                headerTemplate: $('#best-in-klas-products-header-template').text(),
                template: $('#best-in-klas-products-template').text(),
                dataSource: new kendo.data.DataSource({
                    type: 'json',
                    transport: {
                        read: url
                    },
                    group: {
                        field: 'groupByField', dir: "desc"
                    },
                    sort: [
                        { field: "ranking", dir: "asc" }
                    ]
                }),
                filterable: false,
                click: function (e) {
                    klas.evProductId = e.dataItem.evProductId;
                    klas.bestInKlasProductDetailsViewModel.getProductDetails(e);
                    klas.app.navigate('#best-in-klas-product-details-view');
                }
            });

这是我的标题模板：

    <script id="best-in-klas-products-header-template" type="text/x-kendo-template">
    # if ( klas.bestInKlasProductsViewModel.checkForBestInKlas(value) ) { #
    <div class="list-view-group-header">
        <div class="group-header-table-container">
            <div><img src="images/best-in-klas.svg" class="best-in-class-logo" /></div>
            <div>
                <div class="market-segment-title">#: klas.marketSegmentName #</div>
                <div class="award-title">Best in KLAS</div>
            </div>
        </div>
    </div>
    # } else { #
    <div class="list-view-group-header">
        <div class="group-header-table-container">
            <div><img src="images/category-leader.svg" class="best-in-class-logo" /></div>
            <div>
                <div class="market-segment-title">#: klas.marketSegmentName #</div>
                <div class="award-title">Category Leaders</div>
            </div>
        </div>
    </div>
    # } #
</script>

是否有一种在群组标题中显示其他数据的好方法？任何帮助将不胜感激。

Answer 1

您可以定义要调用的函数，而不是为groupHeader定义模板。在该功能内部，您可以随心所欲地返回任何您想要的标题。

headerTemplate: headerTemplateFunction,

具有类似

的功能

function headerTemplateFunction(e) {
  var matchedData = $("#listView").data("kendoMobileListView").dataSource.data().toJSON().filter(function(item) {
    return item.continent === e.value;
  });

  return e.value + " has a total of : " + matchedData.length;
}

请参阅jsBin上的示例http://jsbin.com/EdiPEVo/2/edit