2.4 Displaying the Article Content

In the previous lesson, we wrote the code to retrieve our feed and populate the articles list. And of course, there was a lot more that went on behind the scenes. We wrote a lot of classes, we did sub-classes, we organized our code for the optimum code reuse. Now we just need to display the content. And we already have the patterns in place so we just need to implement them. So we're going to start with our article class, because the constructor is being passed to the actual RSS article. So we have the title, we have the link, we also have the content. So we're going to add a content property to our article class, and that is going to be the content. And then whenever we click on one of the article items, we want to tell our application, hey, the article item changed. It's time to get that article and load the content. So we have already essentially done that, but with our feeds. So we are going to copy our existing code, let's paste it. Let's change feeds to articles and instead of calling loadFeed, we will call loadContent and then we will just need to implement that method. Now we can create another class that's going to serve for the content and all of that stuff. But we've written a lot of classes. Let's just do something easy. Let's get the element from the document. I don't remember what the element name is, so it's reading-container. Let's grab that. We will retrieve the element and we will set innerHTML equal to the article.content, and that should work. So let's select the Tuts Twitter feed. Let's select any one of these and voila, we are now displaying the content. If we switch to the PRS Guitar's feed ee, of course, see our articles there. Now, unfortunately, it's not formatted very well for their feed, that depends upon the feed. That's always how it has been. But at least, we are seeing the content and of course, our article list is behaving as it should, thankfully, because we fixed it in the previous lesson. So, there we go. We have our reader application written using Object-Oriented JavaScript. Of course, naturally, there's a lot of things that we could add to it, add more features, add more usability. But this is a great starting-off point, even if I do say so myself.