View works first time, but not second (using templates)

[John]

I have a mobile view that is populated via templates and a click handler of a listview datasource.  The datasource setup (and click handler) look like this:

http://jsbin.com/ihirin/1/edit

My problem is that when running on a mobile device, the first time that the detail UI is loaded, things look OK.  But on subsequent loads, two errors occur: 

1. the install button is not styled correctly (instead, it looks like the install button in the jsbin example above)
2. the scrollview for the screenshots doesn't appear to init correctly, all images are visible.

To me, this feels like a "did not initialize or [re]apply styles to the content when the view was shown for the second time. 

I suspect the answer is to re-apply the styling to the content containers, but since I've only been coding JS and Kendo UI for 3 days, I don't yet know how to do this. 

Pics of what I mean are available here:
https://plus.google.com/photos/109011173406009278052/albums/5847214628087409777?authkey=CP30nZmapuDRuwE

I'd love to know how to fix this problem.

[Alexander Valchev]

Hi John,

Thank you for getting in touch with us.

The problem comes from the fact that you are directly replacing the View's content which is not supported. Here is the problematic code:

click: function(e) {
    document.getElementById("appitem-header-content").innerHTML = kendo.template($("#appitem-header-template").html(), {useWithBlock: false})(e.dataItem);
    document.getElementById("appitem-description-container").innerHTML = kendo.template($("#appitem-description-template").html(), {useWithBlock: false})(e.dataItem);
    document.getElementById("appitem-screenshot-container").innerHTML = kendo.template($("#appitem-screenshot-template").html(), {useWithBlock: false})(e.dataItem);
    app.navigate("#appitem-detail");
}

Mobile widgets are initialized once, when their parent View is initialized. If you replace the HTML of the View after it is initialized, the framework will not enhance the components event though they have a data-role attribute.

You may consider using MVVM to update the content (source and template binding) or modify only the text (without widgets). I recommend you the first approach.

Regards,
Alexander Valchev
the Telerik team

[John]

Hi, thanks for the ideas. For now I solved it by removing the entire view via jQuery $('#viewname').empty(), followed by $('#body').append() using the new content - which is probably rather brute force, but works really well :-)

And, to be specific, here's the code I use to handle this - just in case someone else has the same problem.  The "view" div is just a string, and it's explicitly removed before being re-templatized and re-inserted into the DOM.  Then it's a simple matter of navigating to the named view.

           click:function(e) {

                // the Kendo system init's views only once - which is a problem when we need to replace most of the view content, because style attributes

                // don't get re-applied.  The solution is to entirely REMOVE the view, and replace it completely.

                $("#appitem-detail").empty();

                $("#appitem-detail").remove();

 

                $("#body").append(window.appitem_detail);

 

                $("#appitem-header-content").html(kendo.template($("#appitem-header-template").html(), {useWithBlock:false})(e.dataItem));

                $("#appitem-description-container").html(kendo.template($("#appitem-description-template").html(), {useWithBlock:false})(e.dataItem));

                $("#appitem-screenshot-container").html(kendo.template($("#appitem-screenshot-template").html(), {useWithBlock:false})(e.dataItem));

 

                app.navigate("#appitem-detail");

             }