gpt4 book ai didi

javascript - Kendo UI ListView - 在编辑时切换模型实例

转载 作者:行者123 更新时间:2023-12-02 23:41:30 24 4
gpt4 key购买 nike

我有一个简单的 Kendo ListView ,其中包含来自四个 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"}];

我有单独的模板用于显示和编辑注释

<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>

问题是,当用户单击“铅笔”图标编辑“Note 2”时,会呈现编辑模板但带有 Note 3 的模型

如果用户取消更多编辑,他们会再次看到显示模板渲染注2

所以当我们进入编辑模式时,Kendo 组件似乎正在从 Note 2 切换到 Note 3...为什么要这样做?

在此处查看正在运行的演示: https://dojo.telerik.com/oNosOCUv/3

最佳答案

我做了 3 处更改:-

正在将架构添加到数据源。

EditNoteTemplate 中的关闭 dl 标记。

将隐藏输入移动到父 div 中,因为 Kendo 正在将数据 uid 分配给该元素。 Look at the HTML elements rendered

<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>

关于javascript - Kendo UI ListView - 在编辑时切换模型实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56051102/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com