Following issue: MVVM model contains groups array, for each group we create a DIV with some information (fields) using source binding and data-template attribute. Each div contains a button, which is suppose to be a mobile button, but it does not render as a mobile button. I simplified my example - each div has simply a button:
and a viewModel:
the result is: http://jsfiddle.net/S7edM/2/
Of course if I uncomment line with kendo.bind, and remove data-model attribute from root div it renders correctly, since it created mobile application on already existing DOM, but if I need to add a new button, it does not renders to mobile button.
General question: If I have different mobile components like switch, list view etc. in such "groups", which are added and removed through templates and view model, do I have any "afterAdd" and "beforeRemove" events, and is there any kendo mobile method to init newly created DOM elements?
<
div
id
=
"test"
data-role
=
"view"
data-model
=
"viewModel"
>
<
div
data-bind
=
"source:groups"
data-template
=
"groupsTemplate"
></
div
>
<
button
data-role
=
"button"
data-bind
=
"click:buttonClick"
>Add new Button</
button
>
</
div
>
<
script
id
=
"groupsTemplate"
type
=
"text/x-kendo-template"
>
<
button
data-role
=
"button"
data-bind
=
"text:caption"
></
button
>
</
script
>
var viewModel = kendo.observable({
caption: "buttons",
groups:[
{name:"button1", caption:"First", error:""},
{name:"button2", caption:"Second", error:""},
{name:"button3", caption:"Third", error:""}
],
buttonClick: function(){
this.groups.push({name:"button4", caption:"Forth", error:""});
}
});
//kendo.bind($('#test'), viewModel);
new kendo.mobile.Application();
the result is: http://jsfiddle.net/S7edM/2/
Of course if I uncomment line with kendo.bind, and remove data-model attribute from root div it renders correctly, since it created mobile application on already existing DOM, but if I need to add a new button, it does not renders to mobile button.
General question: If I have different mobile components like switch, list view etc. in such "groups", which are added and removed through templates and view model, do I have any "afterAdd" and "beforeRemove" events, and is there any kendo mobile method to init newly created DOM elements?