javascript - Kendo 模板源绑定(bind)数组创建双条目

Question

我正在使用带有数组的 Kendo 模板来动态地将行添加到表单中，但是，当我将一个项目推送到数组上时，它会添加两行，两者都绑定(bind)到 MVVM 中的同一数据对象(因此有两个对象，有四行)。我已经使用 debugger; 运行该页面模板中的一行，正如所怀疑的，它在完成之前点击了两次。

更奇怪的是，它按顺序渲染行，然后按相反的顺序渲染行，因此，如果我对第一行进行更改，那么它会对最后一行进行相同的更改(因为它们绑定(bind)到同一个对象)在数组中)等。

<小时/>

HTML

这是表单所在的 HTML(可观察对象 classInfo 已绑定(bind)到 <form> 标记，因此它在数据绑定(bind)中丢失):

<fieldset id="classWhen">
    <p>
        <!-- other form stuff -->
    </p>
    <div id="classDates" data-bind="source: classInfo.ClassDates" data-template="classDateTemplate"></div>
</fieldset>

<小时/>

剑道模板

这是模板，其中包含一个下拉列表和两个日期选择器的行:

<script id='classDateTemplate' type='text/kendo-ui-template'>
    <p>
        <select class="classDateTypeDropdown">
            <option><!-- TYPE 1 --></option>
            <option><!-- TYPE 2 --></option>
            <option><!-- TYPE 3 --></option>
            <option><!-- TYPE 4 --></option>
        </select>
        <input class="classDatePicker" data-bind="value: DateStart" style="width: 125px;" /> to 
        <input class="classDatePicker" data-bind="value: DateStop" style="width: 125px;" />        
    </p>
</script>

<小时/>

Kendo 可观察对象

这是 Kendo Observable，它有一个数组，其格式如下:

 var classModel = new kendo.observable({
  classInfo: {

    //.....

    ClassDates: [],

    //.....
    }
});

<小时/>

Javascript推送函数

还有一个addDate()将新项目推送到数组的函数:

function addDate() {
    classModel.get("classInfo.ClassDates").push({
        "ClassType": "Type 1",
        "DateStart": null,
        "DateStop": null
    });

    //change inputs to DatePickers

    //change select to DropDownList
}

<小时/>

我尝试使用基本 HTML 元素在不创建 DropDownList 和 DatePickers 的情况下运行它，但结果相同。任何帮助将不胜感激。

Answer 1

所以，我不确定为什么会发生这种情况(需要涉及一些研究)，但问题的原因是我的绑定(bind)。显然 Kendo 模板不喜欢绑定(bind)到属于其他对象的对象数组，就像我使用 classInfo.ClassDates 那样。 .

我更改了绑定(bind):

kendo.bind($('#addClassWindow'), classModel );

<div data-bind="source: classInfo.ClassDates"data-template="classDateTemplate"></div>

至:

kendo.bind($('#addClassWindow'), classModel.classInfo );

<div data-bind="source: 类(class)日期"data-template="classDateTemplate"></div>

现在一切正常了。无论出于何种原因。