Making an asynchronous request
Let's start building our new feature! We'll add some CSS to style our new page element:
#pet_information .more { color: gray; } #pet_information .more p { border: 1px solid #CCC; border-left: none; border-right: none; padding: 1em 0; margin-top: 2em; } #pet_information .more a { color: #194900; }
We'll trigger a lookup from PetListView
whenever a new pet is selected from the list:
selectPet: (petIndex, element) -> petView = @views[petIndex] @renderToElement "pet_information", petView.formattedDescription() petView.renderExtraContent()
We need to add a container element to the bottom of the content rendered by our PetView:
formattedDescription: -> "<h2>#{@pet.name}</h2>" + "<h3 class='breed'>#{@pet.breed} " + "(#{@pet.age ? "??"} years old)</h3>" + @imageTag(@pet.image) + "<p class='description'>#{@pet.description}</p>" + "<div id='additional_info' class='more'></div...