locked
how to bind multiple data sources to one single element

    Question

  • <div id="retrieved-search-results-template"//template
             data-win-control="WinJS.Binding.Template"
             style="display: none">
            <div class="container">
                <div class="series-container">
                    <div class="banner">
                        <img src="/images/gray.png" data-win-bind="src:banner ;alt:name" />
                    </div>
                    <div class="overview">
                        <div>
                            <h3 data-win-bind="innerText: overview" />
                        </div>
                    </div>

                    <div class="cast">
                        <div>
                            <img src="/images/gray.png" class="banner" data-win-bind="alt:name" />
                            <h4 data-win-bind="innerText: name"/>
                        </div>

                    </div>
                </div> 
            </div>
        </div>

    ---------------------------

     <div id="retrieved-search-results" data-win-control="WinJS.UI.ListView"
                 data-win-options="{itemDataSource : RetrievedSeriesData.retrievedSeries.dataSource, // only 1 data source
                                    itemTemplate: select('#retrieved-search-results-template'),
                                    layout: {type: WinJS.UI.GridLayout},
                                    tapBehavior:'toggleSelect',
                                    selectionMode:'multi'
                                   }">

    ---------------------------------------------

    series banner gets downloaded first;

    series overview gets downloaded in background and is available later on.

    i want overview and banner to be binded to 2 different data souces

                        
    Thursday, February 13, 2014 4:21 AM

Answers

  • Not sure if i follow, but wouldn't it be best to have one datasource and append to it

    so for example:

    var datasource = new WinJS.Binding.List()

    then when data somes in push it into the datasource

    newdata.forEach(function(data) {

      datasource.push(data)

    }

    etc

    Friday, February 14, 2014 8:28 AM
  • May I know if A and B has the same data template? Why not push B into A as Andy suggested, you could fire a event once B has successfully downloaded to local.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, February 14, 2014 9:13 AM
    Moderator
  • I don't think the ListView's itemDataSource property supports setting two data sources directly. However, WinJS.Binding.List (the datasource) supports grouped data, so I don't see a good reason NOT to push both data sets into the same WinJS.Binding.List.
    Wednesday, February 19, 2014 12:38 AM

All replies

  • Hi mayanklohani,

    Here you have a ListView with Template bind to "RetrievedSeriesData.retrievedSeries.dataSource", not quite understand how you want to bind 2 different data source, together or just replace?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, February 14, 2014 3:57 AM
    Moderator
  • this is the item source I have assigned

     data-win-options="{itemDataSource : RetrievedSeriesData.retrievedSeries.dataSource}"

    I want to give 2 data sources like this 

    data-win-options="{itemDataSource : DataSource A, DataSource B}

    Friday, February 14, 2014 4:35 AM
  • Not sure if i follow, but wouldn't it be best to have one datasource and append to it

    so for example:

    var datasource = new WinJS.Binding.List()

    then when data somes in push it into the datasource

    newdata.forEach(function(data) {

      datasource.push(data)

    }

    etc

    Friday, February 14, 2014 8:28 AM
  • A and B have completely different information and they both arrive at completely different time.

    I am downloading the most important information and displaying it directly(a datasource) and the other data gets downloaded in background(data source b) and is displayed latern on

    now i want to use both data sources while binding it with my div element


    Friday, February 14, 2014 8:43 AM
  • May I know if A and B has the same data template? Why not push B into A as Andy suggested, you could fire a event once B has successfully downloaded to local.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, February 14, 2014 9:13 AM
    Moderator
  • I don't think the ListView's itemDataSource property supports setting two data sources directly. However, WinJS.Binding.List (the datasource) supports grouped data, so I don't see a good reason NOT to push both data sets into the same WinJS.Binding.List.
    Wednesday, February 19, 2014 12:38 AM