Question

我正在尝试根据DropDownList值更改模板后重新绑定列表视图数据。我已经包含了一个JSFiddle供参考。当我重新绑定时，模板中的值未定义。谢谢！

我认为处理它的最佳方式是“选择”或“更改”功能：

var cboDetailsCategory = $("#detail").kendoDropDownList({
data: [
    "All",
    "Customer",
    "Location",
    "Meter",
    "Other"],
select: function (e) {

    var template = $("#" + e.item.text()).html();
    console.log("template", template);
    $("#details").html(template);       
},
change: function (e) {
},

请参考JSFiddle链接和此图形作为视觉

UI shown after name search is complete and user clicked on a name

这是一个更长的工作流程：

用户完成名称搜索并单击搜索按钮。
名称结果填充在列表视图中，使用模板单独呈现为按钮控件。
用户然后单击其中一个名称结果（显示为按钮文本）。
类别下拉列表（'All'＆lt; - default，'Location'，'Customer'...）使用户能够定位他们想要查看的数据主题。 “全部”是默认值，显示有关所选名称的所有详细信息。
因此默认情况下会填充“所有”模板。
如果用户想要查看“位置”详细信息（模板），请从下拉列表中选择。
模板显示但值均为空白。填充它的唯一方法是再次单击名称（按钮）。

我想删除重新点击按钮（名称）以填充模板（“位置”等等）的必要性。

我已经整理了一个显示结构的JSFiddle。虽然由于数据是私有的并且通过安全网络提供服务，但我无法访问它。

参考JSFiddle：我认为问题在于onclick事件抓取data-uid并将其传递给初始默认模板（名为'All'，但它不包含在代码中，因为它很长）。当用户更改下拉列表（cboDetailsCategory）并选择新模板时，我将丢失数据。

感谢您的帮助。我真的坚持这个，这是一个当前的节目塞。

Answer 1

没有官方支持的方式来更改模板，而不会破坏列表视图并重建它。但是，如果你不介意进入一些私人api的东西（被警告我不能保证剑道不会在不告诉你的情况下破坏它）你可以这样做

var listview = $("#MyListview").getKendoListView();

listview.options.template = templateString;

listview.template = kendo.template(listview.options.template);
//you can change the listview.altTemplate the same way 

listview.refresh(); //redraws the elements

如果您想要防止未知的API更改，您可以执行此操作，这会产生更多的开销，但不存在无法更改的风险（未经测试！）

var listview = $("#MyListview").getKendoListView(),
    options = listview.options;


options.dataSource = listview.dataSource;

listview.destroy();

$("#MyListview").kendoListView(options);

Answer 2

这是解决方案，感谢大家的帮助！ JSFiddle Link

问题出在我设置绑定的地方：

$("#list").on("click", ".k-button", function (e) {
    var uid = $(e.target).data("uid");
    var item = dataSource.getByUid(uid);
    var details = dropdown.value();
    var template = $("#" + details).html();
    $("#details").html(template);
    kendo.bind($("#details"), item);
    currentData = item;
});

如何在更改模板后重新绑定Kendo ListView

2 个答案: