CODEWITHSUNDEEP
javascripthtmldata-bindingwindows-8
Kevin P
Kevin P

Reputation: 311

Windows 8/ Metro UI data-binding javascript

I am creating an application using javascript/HTML for windows 8 which basically displays text which is pulled from an html file.

I am using the data.js file to organise groups and items. One of the properties is the 'url' which stores the url of the html page which contains the main content for the application.

I came up with this code to retrieve the html code from the html page which contains the content to be displayed:

WinJS.UI.Fragments.renderCopy(url)
                  .done(function (fragment) {
                  return fragment;
});

How do I run this code for each item in the array in data.js and bind the data so that the content is from the HTML page, and the headings/titles are from the data.js file?

I apologise if I'm causing any confusion. I would appreciate any help.

Thanks.

Upvotes: 1

Views: 1309

Answers (1)

Jeff Brand
Jeff Brand

Reputation: 5633

Assuming you want to stick with the layout of data.js and not create your own data classes, I would use a custom renderer for the listview.

Something like this...

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);

    });
}

);

In this example, I am binding the content of a html fragment to the title of a given item from data.js. You will need to update the itemtemplate and bind the title element to innerHTML instead of textContent.

<h4 class="item-title" data-win-bind="innerHTML: title"></h4>

You will also need to assign the custom renderer to the listview. You can do this in the HTML markup or just change the template js in groupItems.js to this...

 listView.itemTemplate = customRender;

If you were to create your own data classes, you may want to put the promise chain from the customer renderer into the class constructor, eliminating the need for a customer renderer.

Upvotes: 1

Related Questions