MaffooBristol/index.html

## index.html
<html>
  <head>
    <script type="text/javascript" src="bower_components/underscore/underscore.js"></script>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type='text/javascript' src="bower_components/backbone/backbone.js"></script>
    <script type='text/javascript' src='bower_components/marionette/lib/backbone.marionette.min.js'></script>

  </head>
  <body>
    <div id='wrapper'>

      <div id='select'>
        Loading...
      </div>

      <div id='table'>
        Loading...
      </div>

    </div>
  </body>

  <script type='text/template' id='row-template'>
  Name: <%=firstName%> <%=lastName%> | Status: <%=status%> | <a href='#' class='js-delete'>Delete</a>
  </script>

  <script type='text/template' id='select-option-item'>
  <%=formName%>
  </script>

  <script type='text/template' id='select-option-empty'>
  No forms found.
  </script>

  <script type='text/template' id='empty-row-template'>
  No items!
  </script>

  <script type='text/javascript' src='lib/script.js'>
  </script>

</html>

## script.coffee
window.app = new Backbone.Marionette.Application()

app.models      = {}
app.collections = {}
app.views       = {}

app.addRegions
  tableRegion:  '#table'
  selectRegion: '#select'

app.module 'Entities', (Entities, app, Backbone, Marionette, $, _) ->

  Entities.Models      = {}
  Entities.Collections = {}

  Entities.Models.entry = Backbone.Model.extend
    defaults:
      firstName: 'Testy'
      lastName: 'Testerson'
      status: 'UNDEFINED_STATUS'

  Entities.Collections.entries = Backbone.Collection.extend
    parse: (res) ->
      @meta = parent.collection._meta
      res

  Entities.Models.form = Backbone.Model.extend
    initialize: ->
      @on 'reset', ->
        @entries ?= new Entities.Collections.entries()
        @entries.parent = this
        @entries.reset @get('data'), parse: true

  Entities.Collections.forms = Backbone.Collection.extend
    model: Entities.Models.form
    url: "data/data.json"

    parse: (res) ->
      {@_meta} = res
      _.map res._data, (data, formName) =>
        {formName, data}

    comparator: 'formName'

  API =
    getEntities: () ->
      if @_data != undefined then return @_data
      @_data = new Entities.Collections.forms

      defer = $.Deferred()

      @_data.fetch
        success: (data) =>
          defer.resolve data
        error: (data) =>
          defer.resolve undefined

      promise = defer.promise()
      $.when(promise).done (data) =>
        console.log data
      return promise

  app.reqres.setHandler "form:entities", () =>
    API.getEntities()


app.module 'Widget.Table', (Table, app, Backbone, Marionette, $, _) ->

  Table.tableItemView = Backbone.Marionette.ItemView.extend
    tagName: 'li'
    template: '#row-template'
    events:
      'click .js-delete': 'deleteItem'
    deleteItem: (e) ->
      e.preventDefault()
      @trigger 'entity:delete', @model
    remove: () ->
      @$el.fadeOut () =>
        Marionette.ItemView.prototype.remove.call @

  Table.tableEmptyView = Backbone.Marionette.ItemView.extend
    tagName: 'li'
    template: '#empty-row-template'

  Table.tableView = Backbone.Marionette.CollectionView.extend
    tagName: 'ul'
    itemView: Table.tableItemView
    emptyView: Table.tableEmptyView
    initialize: () ->
      # This is horribly ugly and hacky. And I'd like formName's input to be dynamic/controlled by Select.selectView!
      @collection = new Backbone.Collection @collection.where({formName: 'sharing'})
      @collection = new Backbone.Collection @collection.models[0].attributes['data']


app.module 'Widget.Select', (Select, app, Backbone, Marionette, $, _) ->

  Select.selectItemView = Backbone.Marionette.ItemView.extend
    tagName: 'option'
    template: '#select-option-item'

  Select.selectEmptyView = Backbone.Marionette.ItemView.extend
    tagName: 'option'
    template: '#select-option-empty'

  Select.selectView = Backbone.Marionette.CollectionView.extend
    tagName: 'select'
    itemView: Select.selectItemView
    emptyView: Select.selectEmptyView
    events:
      'change': 'updateWidget'
    updateWidget: (e) ->
      @trigger "update:option", $(e.currentTarget).val()


app.module 'Widget', (Widget, app, Backbone, Marionette, $, _) ->
  Widget.Controller =
    listEntities: () ->
      entitiesRequest = app.request 'form:entities'

      $.when(entitiesRequest).done (entities) ->

        tableView = new Widget.Table.tableView collection: entities
        app.tableRegion.show tableView

        selectView = new Widget.Select.selectView collection: entities
        app.selectRegion.show selectView

        tableView.on "itemview:entity:delete", (childView, model) ->
          entities.remove model

        # Doing this empties out the select dropdown, leaves the table as is,
        # but throws up a "formName is not defined" error. Without parse: true
        # it does the same, but without error and the select list shows "No forms found".
        selectView.on "update:option", (selection) ->
          entities.reset parse: true


app.addInitializer () ->
  app.Widget.Controller.listEntities()

app.start()
	<html>
	<head>
	<script type="text/javascript" src="bower_components/underscore/underscore.js"></script>
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type='text/javascript' src="bower_components/backbone/backbone.js"></script>
	<script type='text/javascript' src='bower_components/marionette/lib/backbone.marionette.min.js'></script>

	</head>
	<body>
	<div id='wrapper'>

	<div id='select'>
	Loading...
	</div>

	<div id='table'>
	Loading...
	</div>

	</div>
	</body>

	<script type='text/template' id='row-template'>
	Name: <%=firstName%> <%=lastName%> \| Status: <%=status%> \| <a href='#' class='js-delete'>Delete</a>
	</script>

	<script type='text/template' id='select-option-item'>
	<%=formName%>
	</script>

	<script type='text/template' id='select-option-empty'>
	No forms found.
	</script>

	<script type='text/template' id='empty-row-template'>
	No items!
	</script>

	<script type='text/javascript' src='lib/script.js'>
	</script>

	</html>
	window.app = new Backbone.Marionette.Application()

	app.models = {}
	app.collections = {}
	app.views = {}

	app.addRegions
	tableRegion: '#table'
	selectRegion: '#select'

	app.module 'Entities', (Entities, app, Backbone, Marionette, $, _) ->

	Entities.Models = {}
	Entities.Collections = {}

	Entities.Models.entry = Backbone.Model.extend
	defaults:
	firstName: 'Testy'
	lastName: 'Testerson'
	status: 'UNDEFINED_STATUS'

	Entities.Collections.entries = Backbone.Collection.extend
	parse: (res) ->
	@meta = parent.collection._meta
	res

	Entities.Models.form = Backbone.Model.extend
	initialize: ->
	@on 'reset', ->
	@entries ?= new Entities.Collections.entries()
	@entries.parent = this
	@entries.reset @get('data'), parse: true

	Entities.Collections.forms = Backbone.Collection.extend
	model: Entities.Models.form
	url: "data/data.json"

	parse: (res) ->
	{@_meta} = res
	_.map res._data, (data, formName) =>
	{formName, data}

	comparator: 'formName'

	API =
	getEntities: () ->
	if @_data != undefined then return @_data
	@_data = new Entities.Collections.forms

	defer = $.Deferred()

	@_data.fetch
	success: (data) =>
	defer.resolve data
	error: (data) =>
	defer.resolve undefined

	promise = defer.promise()
	$.when(promise).done (data) =>
	console.log data
	return promise

	app.reqres.setHandler "form:entities", () =>
	API.getEntities()


	app.module 'Widget.Table', (Table, app, Backbone, Marionette, $, _) ->

	Table.tableItemView = Backbone.Marionette.ItemView.extend
	tagName: 'li'
	template: '#row-template'
	events:
	'click .js-delete': 'deleteItem'
	deleteItem: (e) ->
	e.preventDefault()
	@trigger 'entity:delete', @model
	remove: () ->
	@$el.fadeOut () =>
	Marionette.ItemView.prototype.remove.call @

	Table.tableEmptyView = Backbone.Marionette.ItemView.extend
	tagName: 'li'
	template: '#empty-row-template'

	Table.tableView = Backbone.Marionette.CollectionView.extend
	tagName: 'ul'
	itemView: Table.tableItemView
	emptyView: Table.tableEmptyView
	initialize: () ->
	# This is horribly ugly and hacky. And I'd like formName's input to be dynamic/controlled by Select.selectView!
	@collection = new Backbone.Collection @collection.where({formName: 'sharing'})
	@collection = new Backbone.Collection @collection.models[0].attributes['data']


	app.module 'Widget.Select', (Select, app, Backbone, Marionette, $, _) ->

	Select.selectItemView = Backbone.Marionette.ItemView.extend
	tagName: 'option'
	template: '#select-option-item'

	Select.selectEmptyView = Backbone.Marionette.ItemView.extend
	tagName: 'option'
	template: '#select-option-empty'

	Select.selectView = Backbone.Marionette.CollectionView.extend
	tagName: 'select'
	itemView: Select.selectItemView
	emptyView: Select.selectEmptyView
	events:
	'change': 'updateWidget'
	updateWidget: (e) ->
	@trigger "update:option", $(e.currentTarget).val()


	app.module 'Widget', (Widget, app, Backbone, Marionette, $, _) ->
	Widget.Controller =
	listEntities: () ->
	entitiesRequest = app.request 'form:entities'

	$.when(entitiesRequest).done (entities) ->

	tableView = new Widget.Table.tableView collection: entities
	app.tableRegion.show tableView

	selectView = new Widget.Select.selectView collection: entities
	app.selectRegion.show selectView

	tableView.on "itemview:entity:delete", (childView, model) ->
	entities.remove model

	# Doing this empties out the select dropdown, leaves the table as is,
	# but throws up a "formName is not defined" error. Without parse: true
	# it does the same, but without error and the select list shows "No forms found".
	selectView.on "update:option", (selection) ->
	entities.reset parse: true


	app.addInitializer () ->
	app.Widget.Controller.listEntities()

	app.start()