section.page.pageOne
  h2 Collection demo

  p Intelligently rendering collections can be a bit tricky. 

  p <a href="https://github.com/ampersandjs/ampersand-view">ampersand-view's</a> <code>renderCollection()</code> method makes it simple.

  p The only code required to manage the collection is:

  pre
    code
        | this.renderCollection(
        |    this.collection, 
        |    PersonView, 
        |    this.queryByHook('people-list')
        | );

  h3 People container:
  ul.list-group(data-hook="people-list")

  p Try it by clicking the buttons

  .buttons.btn-group
    button.btn.btn-default(data-hook="reset") .reset() 
    button.btn.btn-default(data-hook="fetch") .fetch() 
    button.btn.btn-default(data-hook="shuffle") .shuffle() 
    button.btn.btn-default(data-hook="add") .addRandom()
    a.btn.btn-default(href="/person/add") Add Person

  p Events are always managed so you don't get any leaks.