Question

I am just getting started with Backbone, and I have set up in a sample app the backbone dependencies (backbone, underscore, json2), and I started writing some backbone models, views, and such for my app.

My question is: suppose a user navigates to a page in my app. How does this page then initialize/call a backbone view? I was under the impression that I am supposed to include this kind of jQuery/js on the page that is loaded:

 $(document).ready(function(){
   window.app = new SampleApp.Views.Articles.ShowView();
   new SampleApp.Routers.RootRouter();
   Backbone.history.start();
 }); 

And then I thought the Articles ShowView would run:

 $(document).ready(function(){
   SampleApp.Views.Articles || (SampleApp.Views.Articles = {});
   window.SampleApp.Views.Articles.ShowView = Backbone.View.extend({
     el: ".container",
     events: {
       'click .overlay': 'test'
     },
     initialize: function(){
       //eg: this.model.bind('change', this.render, this)
     },

     render: function(){
       $(".container").html('');
       alert('got here');
     },
     test: function(){
       alert('clicked a picture');
     }
   })
 });

However, when I load the page, I don’t get any of the functionality specified in my ShowView. (no alerts etc..). I realize that ‘ShowView’ is a misnomer, as it doesn’t actually do anything yet. But if it is truly being called, then shouldn’t these alerts run?

FYI I think I included all the files for backbone correctly:

 <script src="{{ STATIC_URL }}js/underscore.js"></script>
 <script src="{{ STATIC_URL }}js/json2.js"></script>
 <script src="{{ STATIC_URL }}js/backbone.js"></script>
 {# Models #}
 <script src="{{STATIC_URL}}js/backbone/models/article.js"></script>
 {# Views #}
 <script src="{{STATIC_URL}}js/backbone/views/articles/show.js"></script>
 {# Routers #}
 <script src="{{STATIC_URL}}js/backbone/routers/root.js"></script> 

Answer 1

In your example, you need something that invokes render on the ShowView instance. This can either be the responsibility of a route in your router, or you can just do it in the document ready handler that creates your view.

window.app = new SampleApp.Views.Articles.ShowView();
window.app.render();