How to build a news aggregator with backbone.js - Part 2

In the previous post, I have been using backbone.js to retrieve news provided by Now, I need to display them in an unique HTML page. By unique page, I mean that all user interactivities will be only in one HTML page, and backend server will provide only data and no HTML tags.

How will be the GUI of this application ? First, a list will display each latest news. When a news is selected, the content detail will be displayed on the side. In addition, an image or video will be shown if it is available.

Explanation view

NewsItemView or the news in tiny

NewsItemView is a backbone.js class. In the list of news, it displays the information of each news. In short, this class generates some HTML from information belonging to an instance of the class NewsItem, the model class defined in the previous post.

 window.NewsItemView = Backbone.View.extend({
         tagName: 'li’,
         className: 'news-item-cell’,

initialize: function() { this.initializeTemplate(); }, initializeTemplate: function() { this.template = _.template($(”#news-item-template”).html()); }, render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; } });

tagName is the HTML element that will be generated for each call to the render method.
And, className is the CSS class of this tag.

Mainly, the code describes how using an HTML template. Then, the method initializeTemplate loads this template in memory. And, #news-item-template is a CSS selector… Simply because the template is contained in the file index.html!

Below, this famous template:


Placeholders, such as %= topic.displayName %>, will be evaluated with the contents of the news.
Finally, when the method render() is called, the template is executed to generate the HTML for one instance of news.

Next, I need to define the list of news.

NewsCollectionView or the collection of tiny news

     window.NewsCollectionView = Backbone.View.extend({  

render: function() { var $newsItems; $newsItems = $('ul#news-items’); this.collection.each(function(newsItem) { var newsItemView = new NewsItemView( { model: newsItem}); $newsItems.append( newsItemView.render().el); }); return this; }; });

In the following paragraphs, this.collection will be populated with the list of news. Then, when the method render() is called, the HTML will be generated for all news in the list. In addition, these HTML elements will be contained in an ul element with the CSS class news-items (ul#news-items)

It is time to test with the javascript console:

View in javascript Console

Yes ! I can see some news! And, Quentin Tarantino is preparing a western!

Now, a real application

One last step before taking a short break: Get rid of the console JavaScript. In short, the application will work without my intervention in the console.

To display this list of news when the page is loaded, I need to modify my favorite script: news.js

     window.App = App = (function() {
       function App() {
         this.newsCollectionView = new NewsCollectionView({
             collection: news

this.newsCollectionView.render(); news.fetch(); } return App; })();

In the index.html file, to execute this javascript code:


Here, all the pieces are assembled to close this article.

Drum roll …

But, nothing is displayed … Probably the demonstration effect. However, I do not work with Windows. The problem must come from me …

[A few grunts later]


Following the execution of news.fetch(), the collection of news is filled with a list of news, but newsCollectionView is not aware of that change. Then, it should be notified when this event occurs. So, I’ve added a constructor to viewNewsCollectionView

      initialize: function() {
           _.bindAll(this, 'render');
           this.collection.bind('reset', this.render);

A new test…Yeesssss !

This strong emotion leads me to give you an appointment for a third part “The power of the detail view”

Next entry

blog comments powered by Disqus