Video

Want to see the full-length video right now for free?

Sign In with GitHub for Free Access

Notes

Destroying Records

  • In the show.jst.eco file add a destroy button to the note div

    <header class="title-container">
      <input type="text" class="note-title" placeholder="Title..." value="<%= @note.get('title') %>" />
    </header>
    <div class="body">
      <textarea class="note-content" placeholder="Content..."><%= @note.get('content') %></textarea>
    </div>
    <button class="destroy-note" tabindex="-1">Remove</button>
    
  • Open the note.css.scss file

    • Add a definition for the destroy-note class under body
    • When hovering over the note dislpay the destroy-note div block

      &:hover { .destroy-note { display: block; } }

      .destroy-note { postition: absolute; top: 7px; right: 5px; display: none; }

  • In the show.jst.eco file set the tabindex of the destroy-note button to -1

  • Open the ShowNote Backbone view

    • Add a client event to the destroy-note class that is handled by a destroyNote method

      events: 'change': 'save' 'keydown .note-title': 'blurIfEnter' 'focus .note-title, .note-content': 'beginEditing' 'blur .note-title, .note-content': 'endEditing' 'click .destroy-note': 'destroyNote'

    • Create the destroyNote method

    • In the method call @model.destroy()

    • Then call @remove to remove the view and avoid memory leaks

    • return false

      destroyNote: ->
        @model.destroy()
        @remove()
        false
      
  • Commit!