Javascript 剑道列表视图：通过选择所需项目切换到编辑模板

我举了一个简单的例子来说明这个问题：

我想选择（单击）一个项目，使其切换到“编辑”模板。 只有在选择新项目之前单击已编辑项目的“取消”图标，它才能正常工作

如果我选择了一个新项目而没有手动取消选择前一个项目，它将停止工作

我不知道该依靠什么，也没有“取消”按钮

这应该很容易。。单击要编辑的项目（切换到其“编辑”模板）。选择一个应取消选择以前选择的项目。i、 e.一次编辑一个

我认为问题在于，在手动编辑另一个项目之前，我无法找到自动选择/取消编辑一个项目（如果有任何选定项目）的方法

编辑1:

放置

this.cancel（）编辑（选定）

未按预期工作。注意，这段代码在最初的dojo示例中被注释掉了

选择新项目时，先前选择的项目将被取消编辑（这很好）。但是，新选择的项目不会被编辑（不需要的行为），并且会引发异常（不需要的行为）

例外情况是：

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中进行了说明：

注意：要查看例外情况，请打开浏览器的开发者工具（即Chrome中的Shift+Ctr+i）

编辑2:

放置
this.save（）编辑（选中）
也可以引发异常。示例：
尝试使用以下选项，而不是取消：

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;
}});

$（“#列表视图”）.kendoListView({
数据源：数据源，
模板：“#=Id#”，
编辑模板：“编辑#=Id#”，
可选：“单一”，
更改：功能（e）{
var index=this.select（）.index（）；
var dataItem=this.dataSource.at（索引）；
如果（e.sender.LastIndex！=索引）{
这是save（）；
this.edit（this.select（））；
}        
e、 sender.LastIndex=索引；
}});
我想我让它完全按照我想要的方式工作。看

它执行一个
this.cancel（）this.edit（）前面加上code>。
如果
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;
}

不幸的是，它不起作用。我添加了“编辑1”来说明原因。我刚刚编辑了解决方案。它正在工作，没有引发异常。当然，如果您不想在每次触发更改事件时进行同步，则必须阻止保存事件，并手动调用sync..save（）除了触发不需要的save（）之外，还可以引发异常（添加了“编辑2”）。我想我有一个基于.cancel（）的有效解决方案。我把它作为一个新的答案，