title: Backbone template doesn't show
body: <p>I started learning Backbone.js following <a href="http://blog.viison.com/post/11097185009/how-to-switch-views-using-backbonejs" rel="nofollow">this</a> example to change the content of a certain div. But the content doesn't show up.</p>
  
  <p>Based from that example I created Backbone.View.js:</p>
  
  <pre><code>Backbone.View = Backbone.View.extend({
    remove: function() {
        $(this.el).empty().detach();
        return this;
    }
  });
  </code></pre>
  
  <p>then my app.js (combined view and router)</p>
  
  <pre><code>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);
      }
  });
  </code></pre>
  
  <p>and the portion of my html </p>
  
  <pre><code>    &lt;div class="page"&gt;
          &lt;h1&gt;HELLO BACKBONES&lt;/h1&gt;
            &lt;div&gt;
              &lt;a href="#home"&gt;home&lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;a href="#view"&gt;view&lt;/a&gt;
            &lt;/div&gt;
          &lt;div id="content" class="content" style="background-color: red;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Templates --&gt;
      &lt;script id="home" type="text/html"&gt;
          &lt;div&gt;
              &lt;p&gt;I am the Home Page Content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;script id="view" type="text/html"&gt;
           &lt;div&gt;
              &lt;p&gt;I am the View Page Content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;script id="not-found" type="text/html"&gt;
           &lt;div&gt;
              &lt;p&gt;Content does not exist&lt;/p&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Also I can't figure out how to call view from the router if it is in a different path</p>