Javascript 剑道UI列表视图-编辑时切换模型实例

我有一个简单的剑道列表视图，其中包含来自四个Note对象数组的静态数据

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

<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

因此，当我们进入编辑模式时，剑道部分似乎正在从注释2切换到注释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>
            </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>

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