Hi,
I have an observable object that contains an array which is binded as a source to a div:
where field-template looks like this:
When I try to remove an element from an array by calling splice, kendo.web.js breaks in IE at line 6753. Apparently I would say the problem is at the source binding because at the specified line, element.children.length is 0 but this happens only in IE. In Chrome and Firefox element.children contains template instances for each element from the array. Why Internet Explorer breaks?
The MV looks as follows:
and finally the binding:
Thank you!
I have an observable object that contains an array which is binded as a source to a div:
<
div
data-bind
=
"source: Fields"
data-template
=
"field-template"
></
div
>
<script id=
"field-template"
type=
"text/x-kendo-template"
>
<div>
<div data-bind=
"text: FieldName"
></div>
<button data-bind=
"events: { click: removeField }"
>Remove</button>
</div>
</script>
The MV looks as follows:
var
SectionVM =
function
(section) {
var
self =
this
;
this
.Fields = [];
if
(section.Fields) {
var
fieldIndex = 0;
$.each(section.Fields,
function
() {
var
field =
this
;
var
fvm =
new
FieldVM(field);
// FieldVM is similar with this VM
self.Fields.push(fvm);
});
}
this
.removeField =
function
(e) {
var FieldIndex = self.get("Fields").indexOf(e.data);
var
removedItem = self.get(
"Fields"
).splice(FieldIndex, 1);
}
self = kendo.observable(
this
);
return
self;
}
var
secVM =
new
SectionVM(someSection); // someSection it's an object comming from the server and matches the VM structure
kendo.bind($(
".section"
), secVM); // .section is a div wrapping the div with the source binding