劍道的ListView：選擇所需項目

Question

切換到編輯模板，我已經能說明問題的這個簡單的例子：http://dojo.telerik.com/AROMAZ

我想選擇（點擊）項目，使其切換到其「編輯」模板。 只有在選擇新項目前點擊編輯項目的「取消」圖標，它才能正常工作。

如果我選擇一個新項目而不手動取消選擇上一個項目，它將停止工作。

我不會依賴什麼，也不需要'取消'按鈕。

它應該很容易..點擊你想編輯的項目（切換到它的'編輯'模板）。選擇一個應取消選擇先前選擇的項目。即一次編輯一個。

我認爲問題是我無法找到一種方法來自動選擇/取消編輯一個項目（如果有任何選定的）之前手動編輯另一個。

編輯1：

this.edit(selected)前配售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();加入這一修改道場所示：http://dojo.telerik.com/AROMAZ/7

注意：要查看異常，打開瀏覽器的開發者工具（即Shift + CTR + I在Chrome）

編輯2：

P this.edit(selected)之前的花邊this.save();也可以拋出異常。例如：http://jsfiddle.net/horacioj/mkJTG/417/

Answer 1

我想我得到它的工作正是我想要的。見http://jsfiddle.net/horacioj/t45n0hdj/

它在this.edit()之前做了this.cancel();。 如果this.select();失敗（因此.edit()會拋出異常），那麼它會按索引（或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; 
} 

Answer 2

而不是取消嘗試使用：

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