index.coffee

require [
  "jquery",
  "routers/root"
], ($, Router) ->
  $(document).ready ->
    new Router
    Backbone.history.start()

note.collection.coffee

define [
  "jquery",
  "models/note"
], ($, Note) ->
  class Notes extends Backbone.Collection
    model: Note

note.model.coffee

define [
  "jquery",
  "order!lib/underscore",
  "order!lib/backbone"
], ($) ->
  class Note extends Backbone.Model
    initialize: ->
    url: =>
      if @isNew() then '/note' else "/note/#{@id}"

query.coffee

define [
  "jquery",
  "models/note",
  "lib/mustache"
], ($, Note) ->
  class QueryView extends Backbone.View
    id: 'query'
    tagName: 'div'
    wrapperTPL:
      '''
      <ol class="note-list">
      </ol>
      <div class="feature">
        <div>
          <textarea></textarea>
        </div>
        <ul>
          <li><button class="add-status">{{status}}</button></li>
          <li><button class="add-comment">add</button></li>
        </ul>
      </div>
      <a href="#" class="close"><img src="/static/images/closelabel.png" title="close" alt="close" /></a>
      '''
    itemTPL:
      '''
      <div class="note-list-item">
        <label class="{{status}}">{{status}}</label>
        <span class="owner">{{owner}}</span>
        <span class="timestamp">{{time}}</span>
        <div class="comment">
          <pre>{{comment}}</pre>
        </div>
      </div>
      '''
    itemTPL2:
      '''
      <div class="note-list-item">
        <label class="{{status}}">{{status}}</label>
        <span class="owner">{{owner}}</span>
        <span class="timestamp">{{time}}</span>
      </div>
      '''
    itemTPL3:
      '''
      <div class="note-list-item">
        <span class="owner">{{owner}}</span>
        <span class="timestamp">{{time}}</span>
        <div class="comment">
          <pre>{{comment}}</pre>
        </div>
      </div>
      '''
    initialize: ->
      _.mixin
        capitalize: (str) ->
          "#{str.charAt(0).toUpperCase()}#{str.substring(1).toLowerCase()}"
      $(document).bind "keydown.query", (e) =>
        @remove() if e.keyCode is 27
      @collection.on 'add', (note) =>
        console.log note
        @render()
      @render()
    events:
      'click a.close': 'remove'
      'click button.add-status': 'addStatus'
      'click button.add-comment': 'addComment'
    remove: () => # override
      $(document).unbind "keydown.query"
      $(@el).remove()
      location.hash = ''
    addStatus: (e) =>
      note = new Note
        qid: @collection.url.split('/')[2]
        status: @.$('button.add-status').html()
        comment: @.$('.feature textarea').val()
      note.save {},
        success: (m, res) =>
          @collection.add m
        error: (m, res) ->
          console.log "error occur: #{res}"
    addComment: (e) =>
      comment = @.$('.feature textarea').val()
      if comment is ''
        @.$('.feature textarea').focus()
        return
      note = new Note
        qid: @collection.url.split('/')[2]
        status: ''
        comment: comment
      note.save {},
        success: (m, res) =>
          @collection.add m
        error: (m, res) ->
          console.log "error occur: #{res}"
    nextStatus: =>
      status = @collection.filter (note) ->
        note.get("status") isnt ''

      return 'open' if status.length is 0

      latestStatus = status[status.length - 1].get('status').toLowerCase()
      if latestStatus is 'open' or latestStatus is 'reopen'
        return 'close'
      else if latestStatus is 'close'
        return 'reopen'
    render: =>
      $(@el).html(Mustache.render(@wrapperTPL, { status: @nextStatus() }))
      note_html = ''
      _.each @collection.models, (note) =>
        if note.get('status') is ''
          note_html += Mustache.render(@itemTPL3, note.attributes)
        else if note.get('comment') is ''
          note_html += Mustache.render(@itemTPL2, note.attributes)
        else
          note_html += Mustache.render(@itemTPL, note.attributes)
      $(@el).find('.note-list').html(note_html)
      $('#query').remove()
      $('body').append(@el)
      @delegateEvents()
      @

root.coffee

define [
  "jquery",
  "collections/note",
  "views/query"
], ($, Notes, QueryView) ->
  class Router extends Backbone.Router
    initialize: ->
      console.log 'Router created'
    routes:
      '/query/:id': 'query'
    query: (qid) =>
      query = new Notes
      query.url = "/query/#{qid}"
      query.fetch
        success: (c, res) ->
          new QueryView { collection: c }
        error: (c, res) ->
          console.log "error occur: #{res}"