Kendo ListView：通过选择所需的项目切换到编辑模板

Question

我有这个简单的例子来说明问题：http://dojo.telerik.com/AROMAZ

我想 select（单击）一个项目以使其切换到其 'edit' 模板。仅当我在 select 创建新项目之前单击已编辑项目的 'cancel' 图标时，它才能正常工作。

如果我 select 一个新项目而没有手动删除 select 前一个项目，它将停止工作。

我没有什么可依赖的，也没有 'cancel' 按钮。

应该很容易.. 单击您要编辑的项目（切换到其 'edit' 模板）。选择一个应该取消select 之前selected 的项目。即一次编辑一个。

我认为问题是我找不到在手动编辑另一个项目之前自动select/取消编辑一个项目（如果有 selected）的方法。

编辑 1：

在 this.edit(selected) 之前放置 this.cancel(); 没有按预期工作。请注意，此代码在原始 dojo 示例中已被注释掉。

当您 select 一个新项目时，之前 select 编辑的项目将被取消编辑（这很好）。但是，新 selected 的项目不会被编辑（不良行为），并且抛出异常（不良行为）。

例外情况是：

Uncaught TypeError: Cannot read property 'uid' of undefined
    at init.edit (kendo.all.js:53910)
    at init.change (VM1332 result:42)
    at init.trigger (kendo.all.js:124)
    at init.change (kendo.all.js:53707)
    at init.trigger (kendo.all.js:124)
    at init._notify (kendo.all.js:25836)
    at init.value (kendo.all.js:25811)
    at init._tap (kendo.all.js:25725)
    at init.d (jquery-1.12.4.min.js:2)
    at init.trigger (kendo.all.js:124)

this.cancel(); 的添加在这个修改后的 dojo 中进行了说明：http://dojo.telerik.com/AROMAZ/7

注意：要查看异常，请打开浏览器的开发者工具（即 Chrome 中的 Shift+Ctr+I）

编辑 2：

在 this.edit(selected) 之前放置 this.save(); 也会引发异常。示例：http://jsfiddle.net/horacioj/mkJTG/417/

Answer 1

而不是取消尝试使用：

this.save();

之前

this.edit(selected);

看来这个解决方案完全符合您的需求。

编辑

为避免在编辑模式下单击同一元素时出现异常：

$("#listView").kendoListView({
dataSource: dataSource,
template: "<div style='padding: 10px; border: 1px solid red;'>#= Id # </div>",
editTemplate: "<div style='padding: 10px; border: 1px solid red;'>EDITING #= Id # </div>",
selectable: "single",
change: function(e) {
    var index = this.select().index();        
    var dataItem = this.dataSource.at(index);

    if(e.sender.LastIndex != index) {
      this.save();        
      this.edit(this.select());          
    }        

    e.sender.LastIndex = index;
}});

Answer 2

我想我完全按照我的意愿工作了。参见 http://jsfiddle.net/horacioj/t45n0hdj/

它在 this.edit() 之前执行 this.cancel();。如果 this.select(); 失败（因此 .edit() 会抛出异常），那么它会 .select() 按索引（或 ID）搜索项目。这可以防止异常发生。

记住最后一个被编辑的项目的变量有助于防止在项目已经被选中的情况下保持编辑状态（即单击相同的项目将切换其状态而不是将其保持在编辑模式）。

基本上：

var lastEditedIndex = -1;

$("#listView").kendoListView({
  ....
  ....
  change: function(e) {
    var index = this.select().index();
    this.cancel();
    var selected = this.select();
    if (selected.length === 1) {
      this.edit(selected);
      lastEditedIndex = index;
    } else {
      selectByIndex(index);
    }
  }


function selectByIndex(index) {
  if (lastEditedIndex === index) return;

  var listView = $('#listView').data('kendoListView');
  var itemWithID = listView.dataSource.at(index);
  listView.select(listView.element.children('[data-uid="' + itemWithID.uid + '"]').first());
  lastEditedIndex = index;
}

Kendo ListView：通过选择所需的项目切换到编辑模板

Kendo ListView: switching to the edit template by selecting the desired item

javascript

kendo-ui

kendo-listview