Kendo Template source binding array creates double entries

Question

I am using a Kendo template with an array to dynamically add rows to a form, however, when I push an item onto the array, it adds two rows, both bound to the same data object in the MVVM (so with two objects, there are four rows). I've run the page with a debugger; line in the template, and as suspected, it hits twice before it finishes.

And what's weirder is that it renders the rows in order, then in reverse order, so if I make a change on the first row, it then makes the same change to the last row (since they are bound to the same object in the array), etc.

---

HTML

Here is the HTML where the form resides (the observable object classInfo is already bound to the <form> tag, hence the reason it's missing from the data-bind):

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

---

Kendo Template

Here is the template which is a row that contains a dropdown list and two date pickers:

<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

Here is the Kendo Observable which has an array, which is formatted as such:

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

    //.....

    ClassDates: [],

    //.....
    }
});

---

Javascript push Function

And an addDate() function which pushes a new item to the array:

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

    //change inputs to DatePickers

    //change select to DropDownList
}

---

I have tried running it without creating the DropDownList and DatePickers, using the basic HTML elements, but with the same result. Any help would be greatly appreciated.

Answer 1

So, I'm not sure why this was happening (some research will need to be involved), but the cause of the problem was with my binding. Apparently the Kendo template does not like binding to object arrays that belong to other objects, as I have with classInfo.ClassDates.

I changed the bindings from:

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

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

to:

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

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

and now it works fine. For whatever reason.