Composite View: Grid View

A grid view build w/ Marionette

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://2lemetry-assets.s3.amazonaws.com/javascripts/backbone.marionette-0.8.1.min.js"></script>
<div id="container">
</div>

<script type="text/template" id="template-page">
<div id="region-content">
    <!-- content -->
</div>
</script>

<script type="text/template" id="template-items">
<div id="items_collection">
</div>
</script>

<script type="text/template" id="template-item">
<div class="item">
  <%= obj.name %>
</div>
</script>

CSS

#region-content {
   height: 100px;
   overflow: scroll;
}

.item {
  height: 20px;
  width: 200px;
  border: 1px solid black;
}

CoffeeScript

class Container extends Backbone.Marionette.Region 
  el: '#container'

  regions:
    content: '#region-content'  
class Page extends Backbone.Marionette.Layout
  template: '#template-page'
  events: 
    'scroll': 'scroll'
  scroll: (event) ->
    console.log 'scroll'
  close: () ->
    @remove()
    @unbind()

class ItemView extends Backbone.Marionette.ItemView
  template: '#template-item'
  close: () ->  
    @remove()
    @unbind()
    
class ItemsView extends Backbone.Marionette.CompositeView
  template: '#template-items'
  collectionEl: 'div#items_collection'
  itemView: ItemView 
  appendHtml: (collectionView, itemView) ->
    collectionView.$(@collectionEl).append itemView.el
  close: () -> 
    @remove()
    @unbind()
    
class Item extends Backbone.Model

class Items extends Backbone.Collection
  model: Item
  
# Build 
items = new Items()
    
i = 1  
while i<50
  console.log 'add item: ' + i
  items.add new Item(
    id: i
    name: 'name: ' + i
  )
  i++
  
# Render
container = new Container()  
page = new Page()
  
container.show page  
page.content.show new ItemsView(
  collection: items
)