MVVM and Mobile Widget Initialization

3 posts, 1 answers
  1. Answer
    Randy
    Randy avatar
    4 posts
    Member since:
    Aug 2012

    Posted 07 Jan 2014 Link to this post

    Following the advice in several forum posts, along with this jsbin created by Alexander Valchev, I am investigating the use of an observable object that provides HTML content to be rendered:
    jsbin.com/iyakig/2/edit
    If I add a second button to the code in the jsbin like this:
     makeButton: function () {
                    var html = '<a data-role="button" data-bind="click: makeListView">Replace again</a><a data-role="button" data-bind="click: makeListView">Replace yet again</a>';
                    this.set("foo", html);
                },

    The second button does not get initialized as a widget as you can see here:
    jsbin.com/iyakig/31/edit 
    Is there a limitation on MVVM binding of HTML code?

    We have been using kendo.mobile.init() to initialize all widgets in the HTML generated by a template, but we are looking to use MVVM binding as suggested in this post.  We would be very interested in knowing why additional widgets are not initialized as well as the advantages to this approach vs. the kendo.mobile.init() approach.


  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 09 Jan 2014 Link to this post

    Hello Randy,

    By design kendo.bind traverses the first element of the template and its children. In your case the template (represented as "foo" string in the ViewModel) contains two root elements which is why only the first button is processed by kendo.bind.

    In order to fix the issue you have to wrap the content in a <div> (or other tag) - in this way the template will have one root element and the two buttons will be children of that root element.
    makeButton: function () {
      var html = '<div><a data-role="button" data-bind="click: makeListView">Replace again</a><a data-role="button" data-bind="click: makeListView">Replace yet again</a></div>';
        this.set("foo", html);
    },


    Here is a link to the updated jsBin:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Randy
    Randy avatar
    4 posts
    Member since:
    Aug 2012

    Posted 09 Jan 2014 Link to this post

    Thank you for the information; that makes perfect sense.  The algorithm was not clear to me before, but this should be easy for us to do.
Back to Top