locked
WinJs-Data Binding with a custom arrayList RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    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.

     

    Example:

    <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"/>

        </div>
    </div>

    Hope this helps

     

    - Girija 

     

     

     

     

    Thursday, March 28, 2013 7:16 PM