• Choose a category
• All
• Classic-Fiction

this.rssItem.rssFeed.title + '';

out += '';

out += '
';

out += 'Article '; out += '(' + this.itemIndex + ' of ' +

this.rssItem.rssFeed.items.length + ') : '; out += '';

out += '';

out += '' +

this.rssItem.title + '';

out += '';

out += '

return out;

},

The toHTML method produces the contextual elements of the display followed by the text of the article. The first portion of the code displays the RSS Feed (x of y) : RSS Feed Title. The link attribute of the rssFeed parent is used to generate the HREF of the anchor produced, and the title is used to generate the text of the anchor. A CSS class name is generated for each span, one for the prompt, and another for the anchor, allowing each to be styled independently. This is illustrated in figure 13.15. Licensed to jonathan zheng

Refactoring

543

var out = ""

out += 'Rss Feed '

out += '(' + this.feedIndex + ' of ' + this.nubFeeds + ') : ';

RSS Feed (2 of 4) :

out += '';

Eric's weblog

out += '';

out += ''

+ this.rssItem.rssFeed.title + '';

out += '';

out += '
';

Figure 13.15 RSS Feed (x of y) : RSS Feed Title

The next portion of code generates the Article (x of y) : RSS Item Title. The link attribute of the RSS item is used to generate the HREF of the anchor produced, and the title of the item is used to generate the text of the anchor. This code also provides CSS class names for both the prompt and the title, as illustrated in figure 13.16.

out += 'Article '; out += '(' + this.itemIndex + ' of '

+ this.rssItem.rssFeed.items.length + ') : ';

Article (1 of 3) :

out += '';

Sending XML to the Server

out += '';

+ this.rssItem.title + '';

out += '';

Figure 13.16 Article (x of y) : RSS Item Title

The last few lines of the toHTML method generate a div element to hold the content of the RSSItem’s article (the description attribute). The code for this is as follows:

out += '

The CSS class name rssItemContent is generated for the article content. It should have a little bit of margin and padding in order for the content to visually reside within the display without touching any borders. It should also have a fixed height and overflow set to auto so that the content scrolls when needed—independently of the contextual information shown previously. A representative CSS

definition for this class is shown here:

.rssItemContent {

border-top : 1px solid black;

width : 590px;

height : 350px;

Licensed to jonathan zheng

544

CHAPTER 13

Building stand-alone applications with Ajax

overflow : auto;

padding : 5px;

margin-top : 2px;

}

Given the code and style shown in this code, the content area produced should look something like the sample shown in figure 13.17.

Putting it all together, the view generated by our RSSItemView class is shown in figure 13.18.

Before we leave the topic of our View, let’s add one more little method to the View to make its usage more convenient:

toString: function() {

return this.toHTML();

}

The reason we give the View a toString method is that it allows us to use the View instance and the HTML string that it generates interchangeably. For example, we can assign the View to the innerHTML attribute of an element, and the string representation, which is the HTML that it generates, will be used. For instance, the following code would assign the generated HTML of a view to the innerHTML of a div with the ID contentDiv:

var rssItemView = new RSSItemView( anRSSFeed, 0, 0, 5 );

$('contentDiv'). innerHTML = rssItemView;

Figure 13.17 Article