backbonejs-not-showing-this-options-parsed-from-router

In answer to http://stackoverflow.com/questions/21890777/backbonejs-not-showing-this-options-parsed-from-router

by Jon Beebe

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>    
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

<div class="container">
  <h1>Off the Backbone</h1>
    <ul class="nav nav-pills">
        <li><a href="#">Food</a></li>
        <li><a href="#/menu-items/new">Add Item</a></li>
        <li><a href="#/menu-items/garden-salad">Garden Salad</a></li>
    </ul>
  <div class="container" id="app">

  </div>
</div>

JavaScript

// ROUTER

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "list",
        "menu-items/new": "itemForm",
        "menu-items/:item": "itemDetails"
    },
    list: function(){
        console.log('list');
        $('#app').html('List screen');
    },
    itemDetails: function(item){
        console.log('itemDetails', item);
        var view = new MenuItemDetails ({
            model: new MenuItemModel({
                name: item,
                category: 'Entree',
                imagepath: 'no-image.jpg'
            })
        });
        
        $('#app').html(view.render().el);
    },
    itemForm: function(){
        console.log('itemForm');
        $('#app').html('New item form');
    }
});

var MenuItemModel = Backbone.Model.extend();

// VIEWS

var MenuItemDetails = Backbone.View.extend({
    render: function(){
        console.log('render', this);
        var markup = '<div>' +
            '<h1>'+this.model.get('name')+'</h1>' +
            '</div>';
        
        this.$el.html(markup);
        return this;
    }
});

var app = new AppRouter();

$(function() {
    Backbone.history.start();
});