使用 Kendo Mobile 列表视图，如何在 HeaderTemplate 上设置多个值？答案

【问题标题】：Using Kendo Mobile List View, How to set multiple values on HeaderTemplate?使用 Kendo Mobile 列表视图，如何在 HeaderTemplate 上设置多个值？
【发布时间】：2014-02-28 21:42:39
【问题描述】：

我正在使用 Kendo Mobile 列表视图。我正在使用带有分组的数据源。我创建了一个组标题模板。我需要在组标题中显示其他数据。添加此数据的最佳方法是什么？

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

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

     $('#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>

有没有在组标题中显示附加数据的好方法？任何帮助将不胜感激。

【问题讨论】：

标签： javascript html kendo-ui telerik kendo-mobile

【解决方案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

【讨论】：