locked
How can I databind a custom control written in WinJS?

    Question

  • We have written a custom control in WinJS.  It works well and we are able to  pass parameters using  data-win-options attribute. 

    We would like to create a listview of such objects. We are trying to use the control as an itemtemplate of the ListView and databind the options of the control.   We are not able to figure out the syntax needed to make it work. We have not seen any examples that deal with this. Any pointers?

    Thanks,

    - Vivek

    Friday, January 11, 2013 2:28 AM

Answers

  • Use a function renderer as a template instead of using an HTML element. Function renderers let you customize the process of creating each item by defining programatically how the item is treated. There are 5 types of renderers that can be created (see bottom of post for more details) but taking the simplest renderer as an example, it would be something like:

    //at some point on the PageControl's ready event
    
    function basicRenderer(itemPromise) { 
    return itemPromise.then(buildElement); 
    }; 
    
    function buildElement (item) { 
    var result = document.createElement("div"); 
    //Build up the item, typically using innerHTML reading the item custom attributes
    return result; }
    
    var myListView = document.getElementById("my-listview-id").winControl;
    myListView.itemTemplate = basicRenderer; 
    For more detailed information please read page 193 of Microsoft Press free Ebook "Programming Windows 8 Apps with HTML/CSS and Javascript"
    • Marked as answer by Vivek Nirkhe Saturday, January 12, 2013 4:51 PM
    Friday, January 11, 2013 1:28 PM

All replies

  • Hi,

    Are you using the PageControl as a custom control?


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, January 11, 2013 7:59 AM
  • Use a function renderer as a template instead of using an HTML element. Function renderers let you customize the process of creating each item by defining programatically how the item is treated. There are 5 types of renderers that can be created (see bottom of post for more details) but taking the simplest renderer as an example, it would be something like:

    //at some point on the PageControl's ready event
    
    function basicRenderer(itemPromise) { 
    return itemPromise.then(buildElement); 
    }; 
    
    function buildElement (item) { 
    var result = document.createElement("div"); 
    //Build up the item, typically using innerHTML reading the item custom attributes
    return result; }
    
    var myListView = document.getElementById("my-listview-id").winControl;
    myListView.itemTemplate = basicRenderer; 
    For more detailed information please read page 193 of Microsoft Press free Ebook "Programming Windows 8 Apps with HTML/CSS and Javascript"
    • Marked as answer by Vivek Nirkhe Saturday, January 12, 2013 4:51 PM
    Friday, January 11, 2013 1:28 PM
  • Hi, that was indeed helpful and we were able to databind custom control in a listview. thanks a lot!

    - Vivek

    Saturday, January 12, 2013 4:51 PM
  • Your welcome, I encourage you to read the book section because there are many performance optimizations you can apply using renderers if your custom control is gonna manage large volumes of data or data that is read asynchronously.
    Saturday, January 12, 2013 6:19 PM