collectionview.js

var AmpersandModel = require('ampersand-model');
var AmpersandCollection = require('ampersand-collection');

var Note = AmpersandModel.extend({
  props: {
    text: 'string'
  }
});

var Notes = AmpersandCollection.extend({
  model: Note
});

var Me = AmpersandModel.extend({
  collections: {
    notes: Notes
  }
});

var NoteView = AmpersandView.extend({
  template: "<li> <span role='text'></span> </li>",
  
  //bind note.text
  bindings: {
    "model.text": {
      role: 'text'
    }
  }
});

var MeView = AmpersandView.extend({
  template: "<div><h1 role='title'></h1> <ul role='notes-list'></ul></div>",
  
  //bind me.name
  bindings: {
    "model.name": {
      type: 'text',
      role: 'title'
    }
  },
  
  render: function () {
    this.renderWithTemplate();
    
    //Render collection into the notes-list
    this.renderCollection(this.model.notes, NoteView, this.getByRole('notes-list');
    
    return this;
  }
});

var me = new Me({
  name: 'Phil'
  notes: [
    { id: 1, text: 'foo' },
    { id: 2, text: 'bar' },
    { id: 3, text: 'baz' },
  ]
});


//Create the meview and render it.
document.addEventListener('DOMContentLoaded', function () {
  var meView = new MeView({ model: me });
  meView.render();
  document.body.appendChild(meView.el);
  
  setTimeout(function () {
    me.notes.add({ text: 'A new note!' });
  }, 5000);
});