Mobile button + MVVM + Templating - button does not renders

2 posts, 0 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

    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? 
  2.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 11 Sep 2012 Link to this post

    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!
Back to Top