MVVM and Mobile Widget Initialization

[Randy]

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.

[Alexander Valchev]

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:

• http://jsbin.com/iyakig/33/edit
  
  

Regards,
Alexander Valchev
Telerik

[Randy]

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.