gistfile1.js

// we have a thing model with a property of name
Model.install('ThingModel', {
  properties: {
    name: 'a'
  }
});

// we have a thing collection that maintains our things
Collection.install('ThingCollection', {
  extend: 'Collection',

  // providing a comparator allows our collection to
  // maintain sort order as items are added
  comparator: function(model) {
    return model.getName();
  },

  // boilerplate :(  -- will go away soon
  construct: function() {
    Collection.call(this);
  },

});

// a collection view automatically updates as its 
// backing collection changes
View.install('ThingsView', {
  extend: 'CollectionView',

  construct: function(options) {
    CollectionView.call(this, options);
  },

  members: {
    // retrieve or build an item view for a model
    viewForModel: function(model) {
      return this.build({content: model.getName()});
    }
  }

});

// instantiate our Collection and our CollectionView
var things = new JX.ThingCollection();
var thingsView = new JX.ThingsView({collection: things});

thingsView.placeIn(document.getElementById('example'));

// this invokes asynchronously so we can watch what's happening

// add each model and observe the maintenance of sort order
for (var i = 0; i < 10; i++) {
  var thing = new JX.ThingModel({name: names.shift()}); 
  things.add(thing);
}

// remove each model
for (var i = 0; i < 10; i++) {
  var lastThing = things.models.last();
  if (lastThing) {
    things.remove(lastThing);
  }
}