javascript - 使用 Kendo Mobile ListView ，如何在 HeaderTemplate 上设置多个值？

Question

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

这是我的 ListView 的当前图像:

这是我绘制 ListView 的脚本:

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

有没有什么好的方法可以在 Group Header 中显示额外的数据？任何帮助将不胜感激。

Answer 1

您可以定义要调用的函数，而不是为 groupHeader 定义模板。在该函数中，您可以随心所欲地返回任何您想要让 header 显示的内容。

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