ListView Template function as part of PageControl?

Question

Hi all,

I am creating a PageNavigation Windows 8 app.

The central page contains a ListView tied against a RESTful data source, and the HTML is rendered by a function.

In my PageControl ready function, I can call a separately defined function in the JavaScript

    var page = WinJS.UI.Pages.define("/html/1_ListProducts.html", {

        ready: function (element, options) {
            console.log("Page ready called for 1_ListProducts.html");
            WinJS.UI.processAll().done(function () {
                var lvProducts = document.getElementById("listView").winControl;

                lvProducts.itemTemplate = itemTemplate;

                // Bind ListView to web data source
                lvProducts.itemDataSource = productsDataSource;
            });

            this.showNavigationHistory();
        },

The function "itemTemplate" is defined outside of the page definition as in

function itemTemplate(itemPromise) etc.

Why does this not work if the itemTemplate function is a member of the page control object so e.g.

    var page = WinJS.UI.Pages.define("/html/1_ListProducts.html", {

        ready: function (element, options) {

           // ready code

        },

        itemTemplate : function(itemPromise) {

          // itemTemplate code

         }

Do I have a fundamental misunderstanding here? Which elements / functions should be defined within the pageControl definition?

Best regards and thanks

Thomas

Answer 1

You have to explicitly "bind" the function using the approach below. See this link for more info on "bind": http://msdn.microsoft.com/en-us/library/windows/apps/Hh770579.aspx

HTML:
=====
<input type="button" value="Click me" id="btnClick"/>
<input type="text" value="Before..." id="txtOut" />

JS:
===

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) {
            document.getElementById("btnClick").addEventListener("click", this.btnClick_Clicked.bind(this), false);
        },

        btnClick_Clicked: function() {
            var textbox = document.getElementById("txtOut");
            textbox.value = "After...";
        }
    });

---

@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

Answer 2

Hi Prashant,

I know you can bind a function to an element by e.g. setting an listener. But I cannot bind a ListView template function like this, or can I?

Like ListView.itemtemplate = somehow_bind_my_itemtemplate_renderer

Thanks

Thomas

Answer 3

Hi Thomas,

You can do that actually. Doesn't the below code just do that or have I misunderstood your question?

In the Navigation App template, replace the following contents. I picked up the images from the ListView essentials sample:

home.html:
===========
        <section aria-label="Main content" role="main">
            <div id="myListView" data-win-control="WinJS.UI.ListView" ></div>
        </section>

home.js:
========

(function () {
    "use strict";  

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) {
            var listView = document.getElementById("myListView").winControl;
            var dataList = new WinJS.Binding.List(dataArray);
            listView.itemDataSource = dataList.dataSource;
            listView.itemTemplate = this.itemTemplateFunction.bind(this);

           
        },
        itemTemplateFunction: function (itemPromise) {
            return itemPromise.then(function (item) {
                var div = document.createElement("div");
                var img = document.createElement("img");
                img.src = item.data.picture;
                img.alt = item.data.title;
                div.appendChild(img);

                var childDiv = document.createElement("div");
                var title = document.createElement("h4");
                title.innerText = item.data.title;
                childDiv.appendChild(title);

                var desc = document.createElement("h6");
                desc.innerText = item.data.text;
                childDiv.appendChild(desc);

                div.appendChild(childDiv);
                return div;
            });
        }
    });
})();

---

@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

Answer 4

Hi Prashant,

got it. Great sample and help.

Thanks for that,

all the best

Thomas