Event binding in model

Nov 19, 2014 at 10:35 PM
I'm don't completely understand the WinJS binding architecture yet because I'm having problems with binding to events in the template of a listview item.

I created a WinJS custom control that adds stepper buttons to an input of type="number". I am using this inside the item template for a listview. This is bound to an array of a class I created which basically contains a few properties and the code required to setup a RelayCommand. The databinding to properties works fine. When the page loads and the PivotItem comes into view, the listview data is loaded and I see a series of headers with my custom control (WinJS.UI.Custom.NumberStepper) underneath. The header innerText is filled correctly and the NumberStepper is filled with the correct data.

I have also bound the RelayCommand to my NumberStepper control's valuechanged event so that I can update my database when the number is changed. I have verified that this control does work properly under normal conditions. However, in this situation, the event is either never fired or the binding to the RelayCommand is not working, because the RelayCommand is never executing.

This is the pivot item section:
<div data-win-control="WinJS.UI.PivotItem" data-win-bind="winControl.header: dataContext.classTypesTabLabel">
    <div class="classTypeTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="memberItem">
            <h4 data-win-bind="textContent: name;
                                               onclick: valueChangedCommandBind"></h4>
            <div data-win-control="WinJS.UI.Custom.NumberStepper"
                 data-win-bind="winControl.value: count;
                 winControl.onvaluechanged: valueChangedCommandBind"></div>
       </div>
    </div>

    <div data-win-control="WinJS.UI.ListView"
        data-win-bind="winControl.itemDataSource: dataContext.selectedPurchasePackage.classTypeQuantities.dataSource"
        data-win-options="{ layout: { type: WinJS.UI.ListLayout },
        itemTemplate: select('.classTypeTemplate'),
        selectionMode: 'none' ,
        tapBehavior: 'none' }">

    </div>
</div>
The property classTypeQuantities is a WinJS.Binding.List of PurchasePackage class. This is the class that contains just properties and the RelayCommand.

Any idea what I'm doing wrong? I was reading about using WinJS.Binding.processAll for nested controls, but the other binding is working fine.
Coordinator
Nov 20, 2014 at 10:10 PM
Edited Nov 20, 2014 at 10:12 PM
Hi Lee,
you can use WinJS.Utilities.markSupportedForProcessing and change the context to this.
I've updated the sample and added a specific case for the ListView "oniteminvoked" event:

this.listItemInvokedBind = WinJS.Utilities.markSupportedForProcessing((() => { this._showMessageDialogCommand.execute("ListView Item invoked"); }).bind(this));

<div id="listView" class="list-items" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource: dataContext.itemsSource; winControl.oniteminvoked: listItemInvokedBind" data-win-options="{itemTemplate: select('#MyDataTemplate') }"> </div>

HTH,
Davide
Nov 22, 2014 at 1:23 PM
Thanks for that info, but I wasn't able to make my problem understood clearly. In any case, I figured out one of the main issues was that I needed to use the class "win-interactive" to make events fire inside the listview items.
Coordinator
Nov 22, 2014 at 2:34 PM
Yes, that's correct. If you add the "win-interactive" class the events can fire and you can then bind the corresponding commands using the same pattern used by the home ViewModel.

I will update soon the sample with a simple example of it.

Thanks for the feedback!