![](/img/trans.png)
[英]Kendo UI - dynamically load template to kendo window with observable view model
[英]Kendo UI List View - switches model instance on Edit
我有一個簡單的Kendo List視圖,其中包含來自四個Note
對象數組的靜態數據
var notes = [{"note_id":1,"content":"This is Note 1","created":"2019-05-08 00:39:34"},
{"note_id":2,"content":"This is note 2","created":"2015-06-04 15:49:26"},
{"note_id":3,"content":"This is note 3","created":"2015-06-03 15:49:26"},
{"note_id":4,"content":"This is note 4","created":"2015-06-02 15:49:26"}];
我有用於顯示和編輯注釋的單獨template
<script type="text/x-kendo-tmpl" id="NoteTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd>#=(content)#</dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-close"></span></a>
</div>
</div>
<input type="hidden" name="type_id" value="0" data-bind="value:type_id" />
</script>
<script type="text/x-kendo-tmpl" id="NoteEditTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd>
<div data-bind="value:content">
#=content#
</div>
</dd>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
</script>
問題是,當用戶單擊“鉛筆”圖標以編輯“注釋2”時,將呈現編輯模板, 但具有注釋3的模型
如果用戶取消更多編輯,他們將再次看到顯示模板渲染注釋2
因此,當我們進入編輯模式時,似乎Kendo組件正在從注2切換到注3 ...為什么這樣做呢?
在此處查看正在運行的演示: https : //dojo.telerik.com/oNosOCUv/3
我進行了3次更改:-
將架構添加到數據源。
在EditNoteTemplate中關閉dl標簽。
將隱藏的輸入移動到父div中,因為Kendo正在將數據uid分配給此元素。
<script type="text/x-kendo-tmpl" id="NoteTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd >#=(content)#</dd>
<input type="hidden" name="type_id" value="0" data-bind="value:type_id" />
</dl>
<div class="edit-buttons">
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-close"></span></a>
</div>
</div>
</script>
<script type="text/x-kendo-tmpl" id="NoteEditTemplate">
<div class="product-view k-widget">
<dl>
<dt>#:kendo. toString(created, "dd/MM/yyyy HH:mm")#</dt>
<dd>
<div data-bind="value:content">
#=content#
</div>
</dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
</script>
<script>
var notes = [
{"note_id":1,"content":"This is Note 1","created":"2019-05-08 00:39:34"},
{"note_id":2,"content":"This is note 2","created":"2015-06-04 15:49:26"},
{"note_id":3,"content":"This is note 3","created":"2015-06-03 15:49:26"},
{"note_id":4,"content":"This is note 4","created":"2015-06-02 15:49:26"}
];
$(document).ready(
function() {
var dataSource = new kendo.data.DataSource({
data: notes,
schema: {
model: {
id: "note_id",
fields: {
note_id: { type: "number" },
content: { type: "string" },
created: { type: "date" }
}
}
}});
var listView = $("#notes-list").kendoListView({
dataSource: dataSource,
template: kendo.template($("#NoteTemplate").html()),
editTemplate: kendo.template($("#NoteEditTemplate").html())
}).data("kendoListView");
});
</script>
<div id="notes-list"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.