Backbone and marionette plunker

<!DOCTYPE html>
<html>

  <head>
    <script data-require="underscore.js@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script data-require="backbone.js@1.3.3" data-semver="1.3.3" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.js"></script>
    <script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="main"></div>
    <script type="text/template" id="todo-list">
      <h1>Todos: <%= todosLength %></h1>
      <ul>
      </ul>
      <input type="text" id="myInput" />
      <button id="button">Add</button>
    </script>
    <script type="text/template" id="todo-item">
      <%= name %>
    </script>
  </body>

</html>


var App = new Marionette.Application();

/*
App.addRegions({
    "mainRegion": "#main" 
});

App.module("Todo", function(Todo, App, Backbone, Marionette, $, _){
    var TodoItem = Backbone.Model.extend({
    });
    
    var TodoCollection = Backbone.Collection.extend({
        model: TodoItem
    });
    
    var TodoItemView = Marionette.ItemView.extend({
        template: "#todo-item",
        tagName: "li",
        triggers: {
            'click': 'done'
        }
    });
    
    var TodoListView = Marionette.CompositeView.extend({
        childView: TodoItemView,
        childViewContainer: 'ul',
        template: "#todo-list",
        ui: {
            myInput: '#myInput'
        },
        events: {
            "click #button": 'add'
        },
        childEvents: {
            'done': 'done'
        },
        templateHelpers: function() {
            return {
                todosLength: this.collection.length
            };
        },
        add: function() {
            this.collection.add({name: this.ui.myInput.val()});
            this.render();
        },
        done: function(child) {
            this.collection.remove(child.model);
            this.render();
        }
    });

    Todo.addInitializer(function(){
        var todos = [];
        var collection = new TodoCollection(todos);
        App.mainRegion.show(new TodoListView({ collection: collection }));
    });
});*/

console.log("Application instance:", App);

App.start();

/* Styles go here */

li {
    cursor: pointer;
}