In a viewmodel, I have an object called "curRec" whose properties are being bound to controls on the view. for instance, curRec.id, curRec.targetScore, etc.
In addition, the curRec has a property of type array called "actions". I am rendering actions using the data-template in Kendo UI.
When I push a new record into curRec.actions, internally kendo is firing event with action "add" twice, hence adding two rows at once. In a time, the array contains only one record because I pushed only one row.
Here's some code:
addMore: function(e) {
e.preventDefault();
this.get("curRec.actions").push( new ActionModel({}) );
},
removeMore: function (e) {
e.preventDefault();
var action = e.data;
var index_item_to_remove = this.get("curRec.actions").indexOf(action);
this.get("curRec.actions").splice(index_item_to_remove, 1);
}
I went through the kendo code and noticed that there are twice calls for an event whose action is "add".
Any hint on what might be causing ObservableArray to fire the event / action "add" twice?