Kendo Template源绑定数组创建双重条目

Question

我正在使用带有数组的Kendo模板来动态地向表单添加行，但是，当我将项目推送到数组时，它会添加两行，这两行都绑定到MVVM中的同一数据对象（所以有两个对象，有四行）。我在模板中运行了一个debugger;行的页面，如果怀疑它在完成之前会打两次。

更奇怪的是，它按顺序渲染行，然后按相反顺序渲染，所以如果我对第一行进行更改，则会对最后一行进行相同的更改（因为它们绑定到同一个对象）在数组中）等。

HTML

以下是表单所在的HTML（可观察对象classInfo已绑定到<form>标记，因此数据绑定中缺少它的原因：

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

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

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

    //.....

    ClassDates: [],

    //.....
    }
});

Javascript push Function

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

所以，我不确定为什么会这样（有些研究需要参与），但问题的原因在于我的约束力。显然，Kendo模板不喜欢绑定到属于其他对象的对象数组，就像我使用classInfo.ClassDates一样。

我更改了绑定：

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

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

为：

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

<div data-bind="source:的 ClassDates “data-template="classDateTemplate"></div>

现在它工作正常。无论出于何种原因。