locked
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

    Wednesday, April 03, 2013 11:58 AM

Answers

  • 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

    Friday, April 05, 2013 12:05 AM
    Moderator

All replies

  • 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



    Thursday, April 04, 2013 12:06 AM
    Moderator
  • 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

    Thursday, April 04, 2013 1:26 PM
  • 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

    Friday, April 05, 2013 12:05 AM
    Moderator
  • Hi Prashant,

    got it. Great sample and help.

    Thanks for that,

    all the best

    Thomas

    Monday, April 08, 2013 6:42 AM