Custom control using WinJS.Binding.List().dataSource


  • I'm trying to use WinJS.Binding.List().dataSource as my control's data source. Like this:

    var cusControl = WinJS.Class.define(
            this.dataSource = options.dataSource || new WinJS.Binding.List().dataSource;
                    this._dataSource = value;
                    //this._dataSource.createListBinding(what should be here);
                get:function(){return this._dataSource;}

    Q1: What is the argument of createListBinding()?

    Q2:When I change the dataSource(invoke dataSource.set),  the itemremoved event could not be triggered correctly and app crash with "noLongerMeaningful" error. How to fix it?

    Q3: Is there any way to set the key values of dataSource manually instead of using default "1,2,3..." sequence?

    Thank you any way^_^ 

    Wednesday, January 15, 2014 4:25 AM

All replies

  • For createListBinding() Here is the source, hope it helps! http://msdn.microsoft.com/en-us/library/windows/apps/br212606.aspx
    • Edited by Aswini S Wednesday, January 15, 2014 8:12 AM hyperlink
    Wednesday, January 15, 2014 8:11 AM
  • Thank you for your reply. I've read this before. But I've got no idea about notificationHandle. Could you show me how to create a IListNotificationHandle object?
    Wednesday, January 15, 2014 9:03 AM
  • Whenever you see an interface like IListNotificationHandler, in JS it means you create a JS object with methods that match the names in the interface. For example, here's how WinJS.Binding.List defines it in ui.js (like 9001 in WinJS 2.0):

    var ListNotificationHandler = WinJS.Class.define(function ListNotificationHandler_ctor(groupDataAdapter) {
        // Constructor
        this._groupDataAdapter = groupDataAdapter;
    }, {
        // Public methods
        beginNotifications: function () {
        // itemAvailable: not implemented
        inserted: function (itemPromise, previousHandle, nextHandle) {
            this._groupDataAdapter._inserted(itemPromise, previousHandle, nextHandle);
        changed: function (newItem, oldItem) {
            this._groupDataAdapter._changed(newItem, oldItem);
        moved: function (itemPromise, previousHandle, nextHandle) {
            this._groupDataAdapter._moved(itemPromise, previousHandle, nextHandle);
        removed: function (handle, mirage) {
            this._groupDataAdapter._removed(handle, mirage);
        countChanged: function (newCount, oldCount) {
            if (newCount === 0 && oldCount !== 0) {
        indexChanged: function (handle, newIndex, oldIndex) {
            this._groupDataAdapter._indexChanged(handle, newIndex, oldIndex);
        endNotifications: function () {
        reload: function () {
    }, {
        supportedForProcessing: false,
    You can use that as a template.


    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.

    Wednesday, January 15, 2014 6:41 PM
  • Thanks for your reply. Maybe I should make my question more clearly.

    I want to implement a custom control using dataSource which could be defined in HTML and modified in JS.

    <div id="myControl" data-win-control="Utilities.cusControl" data-win-option="{}"></div>

            myControl.winControl.dataSource = new WinJS.Binding.List(options.data).dataSource;

    But if I change dataSource, a "noLongerMeaningful" error will be occured.

    Thursday, January 16, 2014 7:03 AM
  • When you do a new WinJS.Binding.List(option.data).dataSource, what is your intent? I'm not sure whether this instantiates a new List first, then accesses its dataSource, or if it's trying to instantiate whatever that dataSource resolves to.
    Thursday, January 16, 2014 5:44 PM