This is a migrated thread and some comments may be shown as answers.

Mobile button + MVVM + Templating - button does not renders

1 Answer 59 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 11 Sep 2012, 01:50 PM
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:

<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>
and a viewModel:
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? 

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 11 Sep 2012, 02:03 PM
Hello Alex,

I am glad to inform you that this issue is already addressed in our latest internal build. One thing to keep in mind is that the button widget does not expose a bindable text option - so you should use a regular template interpolation.

<script id="groupsTemplate" type="text/x-kendo-template">
    <button data-role="button">#: caption #</button>
</script>

Greetings,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Button (Mobile)
Asked by
Alex
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or