There's one more bit of refactoring that will help us pare down our code. We've got a pattern that's repeated in a number of places in our views:
availablePets = document.getElementById "available_pets"availablePets.innerHTML = petOutput.join ""
We find a DOM element using an id, and then insert some generated output into it. It would be nice if we could encapsulate this logic somewhere. It will save us time, make our code easier to read, and if we want to change the pattern (say, to support older browsers), we'll only need to do it in one place.
This is a generic piece of display functionality, but we don't have a good way to share among all our view classes. Well… we do have a good way, we just haven't written it yet! This is a perfect situation for inheritance. We'll define a generic View class that all our views inherit from, which will give us an easy way to promote code reuse.
First add it to index.html, before the other view files:
<script src...