558CHAPTER 13

Building stand-alone applications with Ajax

has responsibility for updating the UI, we should expect our work to be mostly done. If that’s your expectation, then you’re right on target. To illustrate this, our updateView() method that has been referenced numerous times throughout our refactoring session is shown in listing 13.42.

Listing 13.42 The updateView() method

updateView: function() {

var rssItemView = new RSSItemView( this.currentFeed.items[this.itemIndex], this.feedIndex,

this.itemIndex, this.options.rssFeeds.length );

this.getLayer(this.visibleLayer).innerHTML = rssItemView; this.fadeIn( this.visibleLayer,

this.bringVisibleLayerToTop.bind(this) );

},

As you can see, the updateView() method delegates all of the hard work to our View class by instantiating an instance of it, setting it as the value of the visible layer’s innerHTML property, and finally fading the layer into visibility. Three lines of code. Not too shabby. Notice that once the layer is faded into view, we call a completion callback named bringVisibleLayerToTop. What this does is update the layer’s zIndex style property to ensure that it’s above the other layer being faded out. The bringVisibleLayerToTop() function is implemented as follows:

bringVisibleLayerToTop: function() { this.getLayer(this.visibleLayer).style.zIndex = 10; this.getLayer((this.visibleLayer+1)%2).style.zIndex = 5;

}

That’s all we have to do from a UI-manipulation perspective. The separation of concerns across our Model, View, and Controller classes has facilitated a clean, maintainable architecture.

13.7.4Refactoring debrief

Our refactoring session concentrated on repackaging our script in such a way as to provide an MVC implementation of our RSS reader. We created an RSSFeed Model class to encapsulate the concept of an RSS feed, as well as an RSSItem class. We created a View class to encapsulate the concept of providing a View for an RSSItem in context of its parent RSSFeed, the RSSItemView. Finally, we tied the