gistfile1.js

YUI().use('datasource-io', 'datasource-jsonschema', 'gallery-modellist-datasource', 'model', 'list-view', function (Y) {
  
  // Can use any type of DataSource here
  var ds = new Y.DataSource.IO({
    source : '/path?',
    plugins : [{fn : Y.Plugin.DataSourceJSONSchema}]
  });

  // Just creating a basic model for testing
  var TestModel = Y.Base.create('test-model', Y.Model, [], {}, {
    ATTRS : {
      id : {},
      attrone : {},
      attrtwo : {}
    }
  });
  
  var modelList = new Y.ModelList({
    model : TestModel,
    plugins : [{fn : Y.Plugin.ModelListDataSource, cfg : {
      source : ds
    }}]
  });
  
  var view = new Y.ListView({
    modelList : modelList,
    listFormatter : function (data) {
      return data.attrone + data.attrtwo;
    }
  });
  
  view.render();

  // Sending a fake request
  source.sendRequest({
    request : 'foo=bar'
  })
  
  
});

list-view.js

YUI.add('list-view', function (Y) {
    Y.ListView = Y.Base.create('list-view', Y.View, [], {
        _formatListItem : function () {
            var formatter = this.get('listFormatter');
            return (formatter ? formatter.apply(this, arguments) : '')
        },

        initializer : function () {
            this.list = new Y.List(this.get('listConfig')));

            this.modelList.after('add', function (e) {
                var newChildren = this.list.add({
                    data : e.model.toJSON(), 
                    formatter : this._formatListItem
                }),
                prevClientId = e.model.get('clientId');

                e.model._set('clientId', newChildren.item(0).get('id'));

                this.modelList._clientIdMap[e.model.get('clientId')] = e.model;
                delete this.modelList._clientIdMap[prevClientId];
            }, this);

            this.modelList.after('remove', function (e) {
                var modelId = e.model.get('id'),
                    li;

                this.list.some(function (item) {
                    if (item.get('data.id') == modelId) {
                        li = item;
                    }
                    return !!li;
                });

                if (li) {
                    li.remove(true);
                }
            }, this);

            this.modelList.after('reset', function (e) {
                this.list.removeAll();
            }, this);
        },

        render : function () {
            if (!this.container.inDoc()) {
                Y.one('body').append(this.container);
            }

            this.list.render(this.container);
        }
    }, {
        ATTRS : {
            listFormatter : {},
            listConfig : {}
        }
    });
}, '', {requires : ['list', 'model-list', 'view']});

list.js

YUI.add('list', function (Y) {

    var getCN = Y.ClassNameManager.getClassName,
        CLASS_EVEN = getCN('list', 'item', 'even'),
        CLASS_ODD = getCN('list', 'item', 'odd');

    Y.ListItem = Y.Base.create('list-item', Y.Widget, [Y.WidgetChild], {
        BOUNDING_TEMPLATE : '<li />',

        _syncUIFormatter : function (formatter) {
            var data = this.get('data'),
                content;
            if (Y.Lang.isString(formatter)) {
                content = Y.Lang.substitute(formatter, data);
            } else if (Y.Lang.isFunction(formatter)) {
                content = formatter({
                    data : data
                });
            }
            
            if (content) {
                this.get('contentBox').setContent(content);
            }
        },

        bindUI : function () {
            this.after('formatterChange', function (e) {
                this._syncUIFormatter(e.newVal);
            });

            this.after('dataChange', function (e) {
                this._syncUIFormatter(this.get('formatter'));
            });
        },

        syncUI : function () {
            this._syncUIFormatter(this.get('formatter'));
        }
    }, {
        ATTRS : {
            data : {},
            formatter : {
                value : '{value}'
            }
        }
    });
    Y.List = Y.Base.create('list', Y.Widget, [Y.WidgetParent], {

        initializer : function () {
        },

        syncStriping : function () {
            this.get('contentBox').all('li').each(function (node, i) {
                if (i % 2 === 0) {
                    node.removeClass(CLASS_ODD);
                    node.addClass(CLASS_EVEN);
                } else {
                    node.removeClass(CLASS_EVEN);
                    node.addClass(CLASS_ODD);
                }
            });
        },

        renderUI : function () {
            this._listNode = Y.Node.create((this.get('ordered') ? '<ol />' : '<ul />'));
            this.get('contentBox').append(this._listNode);

            this._childrenContainer = this._listNode;
        },

        bindUI : function () {
            this.after('addChild', function () {
                this.syncStriping();
            }, this);

            this.after('removeChild', function () {
                this.syncStriping();
            }, this);
        },

        _getListNode : function () {
            return this._listNode;
        }
    }, {
        ATTRS : {
            listNode : {
                readOnly : true,
                getter : '_getListNode'
            },
            ordered : {
                value : false
            },
            defaultChildType : {
                value : Y.ListItem
            }
        }
    });
}, '', {requires : ['widget-base', 'widget-parent', 'widget-child']});