kendo equivalent of jquery mobile page() for innerHTML

[Ryan]

I am trying to migrate a jquery mobile app to kendo mobile.  

The app makes extensive use of arbitrary HTML coming in from ajax requests, inserted into the dom using innerHTML, and then when you call $('#somenewcontainer').page(); anything with mobile bindings gets rendered. 

For example, injecting the following into the dom using innerHTML:
<div id="somenewcontainer">
 <a data-role="button" href="javascript:go();">go</a>
 <a data-role="button" href="javascript:go2();">go2</a>
</div>

When i call  $('#somenewcontainer').page(), the two buttons get rendered as a mobile buttons.

How, in kendo mobile, do i initialize new dom elements like i can in jquery mobile?

[Alexander Valchev]

Hello Ryan,

Thank you for your interest in Kendo UI Mobile.

There is no equivalent for this approach in Kendo UI Mobile. Generally speaking, direct replacement of the HTML is not supported. If the mark-up comes from ajax request I can recommend you to use ListView with DataSource or MVVM source and template binding.

For your convenience I prepared a small example that demonstrates the MVVM approach:

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

Alternatively you may force widget rendering with kendo.init method.

kendo.init(container, kendo.mobile.ui)

Even though that this will work, I recommend you to use ListView + DataSource or MVVM template binding as they are less error prone.

 
Kind regards,
Alexander Valchev
the Telerik team