Backbone template doesn't show

Question

I started learning Backbone.js following this example to change the content of a certain div. But the content doesn't show up.

Based from that example I created Backbone.View.js:

Backbone.View = Backbone.View.extend({
  remove: function() {
      $(this.el).empty().detach();
      return this;
  }
});

then my app.js (combined view and router)

var appView = Backbone.View.extend({
  initialize: function(options){
      this.template = options.template;
  },

  render: function(){
     var content = $(this.template).html();
     $(this.el).html(content);
     return this;
  }
});

 var AppRouter = Backbone.Router.extend ({

    initialize: function(el) {
        this.el = el;
        this.homePage  = new appView({template: '#home'});
        this.viewPage = new appView({template: '#view'});
        this.notFoundPage = new appView({template: '#not-found'});
    },

    routes: {
        ''     : 'home',
        'view' : 'viewImage',
        'else' : 'notFound'
    },

    currentView: null,

    switchView: function(view){
        if(this.currentView){
            this.currentView.remove();
        }
        this.$el.html(view.el);
        view.render();
        this.currentView = view;
    },

    home: function(){
        this.switchView(this.homePage);
    },
    viewImage: function(){
        this.switchView(this.viewPage);
    },
    notFound: function() {
        this.switchView(this.notFoundView);
    }
});

and the portion of my html

    <div class="page">
        <h1>HELLO BACKBONES</h1>
          <div>
            <a href="#home">home</a>
          </div>
          <div>
            <a href="#view">view</a>
          </div>
        <div id="content" class="content" style="background-color: red;"></div>
    </div>

    <!-- Templates -->
    <script id="home" type="text/html">
        <div>
            <p>I am the Home Page Content</p>
        </div>
    </script>

    <script id="view" type="text/html">
         <div>
            <p>I am the View Page Content</p>
        </div>
    </script>

    <script id="not-found" type="text/html">
         <div>
            <p>Content does not exist</p>
        </div>
    </script>

Also I can't figure out how to call view from the router if it is in a different path

Answer 1

The problem is in your method switchView . You try to use this.$el but it's undefined

You should use this.el instead:

switchView: function(view){
    if(this.currentView){
        this.currentView.remove();
    }
    this.el.html(view.el);
    view.render();
    this.currentView = view;
}

To start your application, don't forget to adding the following code at the end of your script:

var router = new AppRouter($('#content'));
Backbone.history.start();