WinJs-Data Binding with a custom arrayList RRS feed

  • Question

  • It seem to me so complicated and i have tried many of things but with no result. I want to create a Horizontal List View on my Metro application (Winjs/HTML), so create the template and the listView html element . The Problem that the DataSource from where i will get my image_url is advanced . This is the form of this DataSource returned from my Json web Service (I don't know if it is a HashTable, ListArray...?? ):

    "path_categories": { "star":"the image url ", "Fruits ": " the image url ", "Animaux":"the image url ", "Country":"the image url ", "Coulor":"the image url ", "Town":"the image url ", "capital":"the image url " }

    I sould set the specific attribute to bind with my enter code here

    Any help will appreciated , Thinks

    Thursday, March 28, 2013 10:55 AM


  • Hi,


    It is a JSOn array. Bind you list view to this array.

    You need to serialize this first :

    var serializedObj = JSON.parse(<response from xhr>);


    to the list bind the data source :

    listview.itemDatasource = new WinJS.Binding.List(serializedObj );


    In the template you need to data-win-bind to the following:

    1. path_categories.star 

    2. path_categories.Fruits  etc.



    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <div class="item">
                    <img class="star" data-win-bind="src: path_categories.star"/>
    <img class="fruits" data-win-bind="src: path_categories.Fruits"/>

    Hope this helps


    - Girija 





    Thursday, March 28, 2013 7:16 PM