Maintainable jQuery Comment App

http://www.intelligiblebabble.com/how-to-write-maintainable-jquery-applications/?utm_source=javascriptweekly&utm_medium=email

by someprimetime

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
    <div id="comment-wrapper">
        <ul>
            <li class="-comment" data-app="{&quot;id&quot;:1,&quot;parentId&quot;:null}">
                <div>
                    <span class="comment-author">Bob</span> at
                    <span class="comment-date">1:00 AM</span>
                </div>
                <div class="comment-body -body">Great Job!</div>
                <ul class="comment-tools">
                    <a class="-reply">Reply</a>
                    <a class="-update">Update</a>
                    <a class="-delete">Delete</a>
                    <a class="-flag">Flag</a>
                </ul>
                
                <ul class="-child-comments">
            <li class="-comment" data-app="{&quot;id&quot;:2,&quot;parentId&quot;:null}">
                <div>
                    <span class="comment-author">John</span> at
                    <span class="comment-date">1:01 AM</span>
                </div>
                <div class="comment-body -body">Thanks!</div>
                <ul class="comment-tools">
                    <a class="-reply">Reply</a>
                    <a class="-update">Update</a>
                    <a class="-delete">Delete</a>
                    <a class="-flag">Flag</a>
                </ul>
                
                <ul class="-child-comments">
                </ul>
        
            </li>
                </ul>
        
            </li>
            <li class="-comment" data-app="{&quot;id&quot;:3,&quot;parentId&quot;:null}">
                <div>
                    <span class="comment-author">James</span> at
                    <span class="comment-date">1:02 AM</span>
                </div>
                <div class="comment-body -body">Thanks for writing this!  It was very...

SCSS

body
{
    display: block;
}
a {
    cursor: pointer;
}

ul {
    list-style: none;
    margin-left: 20px;
}
.comment-author{
    font-weight: bold;
}
.comment-date{
    color: #888;
}
.comment-tools {
    margin: 0;
    padding: 0;
    font-size: 11px;
    li {
      display: inline-block;  
}
}

#comment-wrapper {
    
}

JavaScript

"use strict";
(function($, application, window) {

    Handlebars.registerHelper('json', function(context) {
        return JSON.stringify(context);
    });


    application.CommunicationLayer = function(spec) {
        var self = this;
        //hardcode author as "Current User"
        //normally, you might pull this from a cookie or something
        self.author = "Current User";

        self.insert = function(comment, callback) {
            console.log(comment);
            //send data to server via AJAX
            //server returns the inserted comment ID
            //trigger callback method with comment data
            //emulate inserted comment by triggering callback
            //with a dummy ID
            callback({
                id: comment.parentId + 1000,
                body: comment.body,
                date: new Date(),
                author: self.author
            });
        };

        self.delete = function(id) {
            //delete comment
        };

        self.update = function(toUpdate, callback) {
            //update comment
            callback();
        };

        self.flag = function(id, reason) {
            //flag comment
        };

        return self;
    };


    application.bindCommentApp = function(app, selector) {
        var $wrapper = $(selector || window.document);

        var addCommentTemplate = Handlebars.compile($("#add-comment-template").html());
        var commentTemplate = Handlebars.compile($("#comment-template").html());
        var commentUpdateTemplate = Handlebars.compile($("#comment-update-template").html());

        $wrapper
        //PRIMARY BINDINGS
        .on('click', '.-delete', function() {
            var $comment = $(this).closest(".-comment"),
                data = $comment.data("app");
            var proceed = confirm("Are you sure you would like to delete this comment?");
            if (!proceed) {
                return;
            }
            app.delete(data.id);
         ...