Custom Renderer for Split page app Javascript

Question

Hi there,

I am creating a split-page app for Windows 8 using Javascript.

I have a set of HTML files, which contain data that I want to display in the application.

I managed to do this using custom renderer like:

var customRender = WinJS.Utilities.markSupportedForProcessing(function (itemPromise) {
    var currentItem = {};

    return itemPromise.then(function (item) {
        currentItem = item;
        var myDiv = document.createElement("div");
        return WinJS.UI.Fragments.renderCopy("/html/1_BasicFragmentLoad_Fragment.html", myDiv)
    })
    .then(function (fragment) {
        var itemTemplate = WinJS.Utilities.query('.itemtemplate')[0];
        currentItem.data.title = fragment.innerHTML; 

        return itemTemplate.winControl.render(currentItem.data);

    });
}
);

Now when I select a group, and an item in my split page app the html data is rendered in the application. However, when I select another item, the previous html code still exists.

For instance, if I select a group and item 1, then item1.html is rendered in the app. When I select item 2, then item2.html is rendered after item1.html (so both data is rendered); where I would expect the application to render just item2.html.

I hope someone could point me in the right direction.

Thank you and your help is appreciated.

Answer 1

Hi, Kevin

According the documentation, the renderCopy method will append to the div that you are passing as a paramether. This means that it will always include the HTML code after all the div's content.

I suggest you to "clean" the div content before using renderCopy.

currentItem = item;
        var myDiv = document.getElementById("mydivID");
        WinJS.Utilities.empty(myDiv);
        return WinJS.UI.Fragments.renderCopy("/html/1_BasicFragmentLoad_Fragment.html", myDiv)

Thanks

Answer 2

Hi there,

Thank you so much for your reply. But I tried something similar before and didn't work. I tried empty-ing the div using WinJS.Utilities.empty(myDiv) but that didn't work.

This is what is said under remarks for renderCopy function here:

"CSS and script blocks that are loaded from fragments are added to the document, and will not be removed even if the fragment is unloaded."

So I'm not sure what to do. Thank you :)