Composite View: TreeView

A treeview build w/ Marionette

by dmitri14

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
    <div id='todoapp'>
       <input id='new-todo' placeholder='New Entry?' type='text' />
      <ul id='todo-list'></ul>
    </div>

    <script type='text/template' id='item-template'>    <!-- Item View Template -->
      <div class='todo-content'><%= content %></div>
      <span class='todo-destroy'></span>
    </script>

CSS

#todo-list li {   /* item view styling */
        position: relative;   /* for the .todo-destroy element  */
        border-bottom: 1px solid grey;
        padding: .2em 0;
      }
      #todo-list .todo-destroy {    /* destroy image */
        position: absolute;
        display: none;  /* do not display unless <li> is hovered */
        right: 3px;
        top: 3px;
        width: 20px;
        height: 20px;
        background: url(../lib/destroy.png);
      }
      #todo-list li:hover .todo-destroy {   
        display: block; /* displaying upper half (gray) of the destroy image upon hovering the ambient "li" element */
      }
      #todo-list .todo-destroy:hover { 
        background-position: 0 -20px; /* displaying lower half (black) of the destroy image upon hovering itself */
      }

JavaScript

$(function() { // loading once the DOM is ready, using `jQuery.ready`  
    var RETURN_KEYCODE = 13; // key code of the RETURN key
    Item = Backbone.Model.extend(); // Defining empty Item model, all properties passed later upon creating
    ItemCollection = Backbone.Collection.extend({
        model: Item,
        // setting the model for this collection
        localStorage: new Store('myCollection') // saving all collection via backbone-localstorage.js library as string under 'myCollection'
    });

    ItemView = Backbone.View.extend({
        tagName: 'li',
        // creating HTML element <li> referenced as 'el' property or as cached jQuery object 'this.$el'
        itemTemplate: _.template($('#item-template').html()),
        //Underscore.js function _.template() parsing '#item-template' and additional JSON data to create Item View HTML
        events: {
            'click .todo-destroy': 'clear'
        },
        initialize: function() {
            this.model.on('change', this.render, this); // updating view whenever model changes
        },
        render: function() {
            this.$el.html(this.itemTemplate(this.model.toJSON())); //associated model -> json -> template HTML -> attaching to 'el'
            return this; // returns the view, so we can append its element
        },
        clear: function() {
            this.model.destroy(); // backbone method: destroys Item and removes it from Collection
            this.remove(); // remove this view 
        }
    });

    CollectionView = Backbone.View.extend({ // View Class Showing Collection
        el: '#todoapp',
        input: $('#new-todo'),
        // caching jQuery object for the Input form
        events: {
            'keypress #new-todo': 'createOnEnter'
            // binding 'press key' event with 'createOnEnter' method
        },
        initialize: function() {
            $('#new-todo').focus();
            itemCollection.on('add', this.addOne, this);
           ...