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...