0

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

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

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

我不依赖什么，也没有“取消”按钮。

应该很简单。单击要编辑的项目（切换到其“编辑”模板）。选择一个应取消选择先前选择的项目。即一次编辑一个。

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

编辑1：

放置this.cancel();之前this.edit(selected)没有按预期工作。请注意，此代码在原始 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();在这个修改后的道场中说明了添加：http: //dojo.telerik.com/AROMAZ/7

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

编辑2：

放在this.save();前面this.edit(selected)也可以抛出异常。示例：http: //jsfiddle.net/horacioj/mkJTG/417/

4

2 回答 2

0

而不是取消尝试使用：

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;
}});
于 2017-07-03T07:43:35.840 回答
0

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

它this.cancel();在this.edit(). 如果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;
}
于 2017-07-04T02:53:21.777 回答