locked
How can I bind to my datasource from a custom control in an Item Template?

    Question

  • Hi,

    Using JavaScript, I am trying to create a ListView whose ItemTemplate uses a custom control:

    This is my item template:

    <div id="listViewItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">

        <div class="listViewItem">

            <div id="customControl" class="control-custom" aria-label="Custom"

                data-win-control="Controls.CustomControl"

                data-win-options={ controltitle: title}" />

        </div>

    </div>

    This is my listview:

    <div id="listView" data-win-control="WinJS.UI.ListView"

        data-win-options="{

    itemDataSource : myGroupedList.dataSource,

    itemTemplate: listViewItemTemplate,

    groupDataSource: myGroupedLIst.groups.datasource,

    groupHeaderTemplate: headerTemplate,

    selectionMode: 'none',

    tapBehavior: 'none',

    swipeBehavior: 'none;

    }"></div>

    I cant seem to access the "title" property(via data-win-options) of an item in my datasource? How should I code my ItemTemplate?

    Saturday, March 9, 2013 7:55 AM

Answers

  • Hi needsAnswer,

    According to the WinJS data binding syntax, to bind the property (of datasource item) to HTML element's attributes, we need to use "data-win-bind" attribute. See reference below:


    #Data binding (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/Hh758311.aspx


    However, in your case, the target property you need to bind is the initialize options of a nested WinJS control. I haven't tried nested data-win-bind against some control properties defined by "data-win-options" which I don't think will work. I would suggest you consider using "templating function" to define your item template. That means you can use code to programmtically build the html DOM structure of your ListView item (and add custom Control into it). Here is the MSDN reference about using templating function:


    #How to create a templating function (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx

     


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, March 15, 2013 9:26 AM
    Monday, March 11, 2013 5:59 AM
    Moderator