locked
Binding an Array based BindingList to item template

    Question

  • So given I have this list= new WinJS.Binding.List([1,2,3])

    I cannot bind its items to a ListView item template? The default template renderer seems to be able to handle it though.

    Friday, April 4, 2014 9:41 PM

Answers

  • Ah I see. Yeah, I think the template render was designed to take objects in as a input. http://msdn.microsoft.com/en-us/library/windows/apps/br229724.aspx
    • Marked as answer by pkursawe Thursday, April 10, 2014 6:52 PM
    Thursday, April 10, 2014 6:11 PM

All replies

  • How exactly are you trying to do this?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, April 7, 2014 7:27 PM
    Moderator
  • Well, how would I bind such array elements in a listview template?

    <span data-win-bind="."></span> does not work :/

    Monday, April 7, 2014 7:37 PM
  • Did you set the data source in the listview div? You must set the template and data source in the data-win-options in order to bind your information like so:
    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div style="width: 150px; height: 100px;">
    
                <!-- Displays the "picture" field. -->
                <img src="#" style="width: 60px; height: 60px;" 
                     data-win-bind="alt: title; src: picture" />
                <div>
    
                    <!-- Displays the "title" field. -->
                    <h4 data-win-bind="innerText: title"></h4>
    
                    <!-- Displays the "text" field. --> 
                    <h6 data-win-bind="innerText: text"></h6>
                </div>
            </div>
        </div>       
    
        <div id="basicListView" data-win-control="WinJS.UI.ListView" 
            data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
                itemTemplate: select('#mediumListIconTextTemplate')}">
        </div>
    This code is provided by this quickstart tutorial: http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx
    • Proposed as answer by datQkiD2 Tuesday, April 8, 2014 3:47 AM
    • Unproposed as answer by datQkiD2 Wednesday, April 9, 2014 3:26 PM
    Tuesday, April 8, 2014 3:25 AM
  • My data consists only of strings, not objects like ur example would require. That's the point of this posting here.
    Tuesday, April 8, 2014 6:32 AM
  • So given I have this list= new WinJS.Binding.List([1,2,3])

    I cannot bind its items to a ListView item template? The default template renderer seems to be able to handle it though.

    When you create a binding list, you create an array of objects. 
    Tuesday, April 8, 2014 4:21 PM
  • Yes, now how would you bind these items in a listview template?
    Tuesday, April 8, 2014 6:39 PM
  • As the example from my previous post shows, you need to set the itemTemplate and itemDataSource in the data-win-options of the listview control which is this bit of code:
    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
            data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
                itemTemplate: select('#mediumListIconTextTemplate')}">
        </div>
    As you can see, this example set the source through a namespace "DataExample" and selected the itemTemplate "#mediumListIconTextTemplate". DataExample.itemList contains the binding list which is set in a javascript file. You can go through the quickstart to see how its done.
    Wednesday, April 9, 2014 5:33 AM
  • Well, how would I bind such array elements in a listview template?

    <span data-win-bind="."></span> does not work :/

    Also to add why this wouldn't work is because the format of the data-win-bind arguments is "elementPropertyName: dataSource". Entering a string wont work because its not in this format.
    Wednesday, April 9, 2014 5:39 AM
  • technically setting a templates is not required for the LV to display something.

    I appreciate your efforts to help. The main problem remains: You cannot use a BindingList with only primitives (not objects) in a LV.

    <span data-win-bind="textContent:."></span>

    does not work.

    You see the problem now?


    • Edited by pkursawe Wednesday, April 9, 2014 7:31 AM
    Wednesday, April 9, 2014 7:31 AM
  • Oh I see. Well if you are trying to just show static strings in the ListView, I dont think you need to bind the data. If you just use <span>hello</span> instead, it'll show the string for each listview item
    Wednesday, April 9, 2014 3:35 PM
  • How exactly will your code show the string/number of each item?
    Wednesday, April 9, 2014 3:38 PM
  • May I ask what it is you are trying to achieve with this? I'm sorry for any confusion, but I want to make sure we are on the same page. That code I just gave doesn't change. It will be the same for each item
    Wednesday, April 9, 2014 5:44 PM
  • Take this HTML

    <div data-win-control="WinJS.UI.ListView" data-win-options="{
         itemDataSource:Data.list.dataSource
         }"></div>
    
    <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
      <div>
        <span _data-win-bind="textContent:name"></span>
      </div>
    </div>
    
    <div data-win-control="WinJS.UI.ListView" data-win-options="{
        itemDataSource:Data.list.dataSource,
        itemTemplate:select('#itemTemplate')
       }"></div>

    This creates 2 listviews. The first one uses the simple HTML Render because no template was set. It displays the items of the list.

    The second listview has a template set, but I do not know how to make it show the items content.

    I guess its not possible. If we want to show a list of primitives we do not specify an itemTemplate at all. Instead the listview uses the default HTML renderer which creates a span element with the toString() content of the lists items. We can style this using CSS.

    Thursday, April 10, 2014 10:56 AM
  • Ah I see. Yeah, I think the template render was designed to take objects in as a input. http://msdn.microsoft.com/en-us/library/windows/apps/br229724.aspx
    • Marked as answer by pkursawe Thursday, April 10, 2014 6:52 PM
    Thursday, April 10, 2014 6:11 PM
  • Yeah I finally understood that too. The MSDN docs could be a bit clearer about this though. It's possible to use Lists of strings or numbers only *without* a template.
    Thursday, April 10, 2014 6:52 PM