Seeing the Model Railroad

Okay, now that we’ve covered models exhaustively, it’s time to actually see something, to move to the View part of our Model-View-Controller-ish application.

You can play with the code here on JS Bin.

First, I need to address the issue of namespacing, which is good to take care of now before running into trouble later down the road. When I started off developing I had code that looked like:

var Railroad = Backbone.Model.extend();
var railroad = new Railroad();

Now that’s fine, but what do I call the View for the railroad? Do I call it viewRailroad, railroadView, or something else?

I discovered a way of solving this problem by using Rico Sta Cruz’s advice to put everything in an App namespace attached to the window to keep everything organized. So now, whenever I’m starting an application, I start with:

window.App = {
 Models: {},
 Views: {}
};

I would then define Models and Views like this:

App.Models.Railroad = Backbone.Model.extend();
App.Models.railroad = new App.Models.Railroad();

App.Views.Railroad = Backbone.View.extend();
App.Views.railroad = new App.Views.Railroad();

This way I can keep Models and Views better organized with visual cues, knowing that the railroad view is using the railroad model.

Since this is the first time we’re looking at Views, we’re going to keep it simple and not add too much in the way of rendering data. In fact, we’re not going to render any data from our railroad model yet – we’ll tackle that in the next post.

App.Views.Railroad = Backbone.View.extend({
 initialize: function(){
   this.render(); 
 }, 
 el:'body',
 render: function(){
   this.$el.html('Hello View!');
 }
});

App.Views.railroad = new App.Views.Railroad();

Taking a look at this View, you can see that the View is made up of three components.

initialize

This is an easy one, since we’ve seen it before as the constructor for Models. Now we have a constructor for the View. In this case, initialize is telling itself to use the render method, which I cover below.

el

el stands for the target element in the DOM for this view. In this case, to make things simple, I’m just targeting the body in the DOM. Usually, I would put a div in the HTML with the id of app, so I can isolate the View to one part of the DOM.

When you specify the el in a View, you can use $el to access a cached jQuery object of the element you used for el. This way you don’t have to use jQuery again to get to the element of el.

Speaking of jQuery, lots of folks are dumping jQuery for Vanilla JS. I see the reasons why. Unfortunately, I have to support legacy browsers (Internet Explorer 8+), so using Vanilla JS isn’t always an option.  The Backbone documentation suggests including jQuery for DOM manipulation, but just for kicks, I tried substituting $el with Vanilla JS and couldn’t get it to work. For the sake of time, I’m not going to bother during these tutorials.

(BTW, Vanilla JS is just plain JS).

render

This is the method used for actual rendering. In this case, we’re just outputting HTML to $el, the cached jQuery object of el, which happens to be the body tag.

That’s it for now. Next time, we’ll actually output data from the model railroad to the view.