Book Image

CoffeeScript Application Development

By : Ian Greenleaf Young
Book Image

CoffeeScript Application Development

By: Ian Greenleaf Young

Overview of this book

JavaScript is becoming one of the key languages in web development. It is now more important than ever across a growing list of platforms. CoffeeScript puts the fun back into JavaScript programming with elegant syntax and powerful features. CoffeeScript Application Development will give you an in-depth look at the CoffeeScript language, all while building a working web application. Along the way, you'll see all the great features CoffeeScript has to offer, and learn how to use them to deal with real problems like sprawling codebases, incomplete data, and asynchronous web requests. Through the course of this book you will learn the CoffeeScript syntax and see it demonstrated with simple examples. As you go, you'll put your new skills into practice by building a web application, piece by piece. You'll start with standard language features such as loops, functions, and string manipulation. Then, we'll delve into advanced features like classes and inheritance. Learn advanced idioms to deal with common occurrences like external web requests, and hone your technique for development tasks like debugging and refactoring. CoffeeScript Application Development will teach you not only how to write CoffeeScript, but also how to build solid applications that run smoothly and are a pleasure to maintain.
Table of Contents (19 chapters)
CoffeeScript Application Development
About the Author
About the Reviewers

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",

We need to add a container element to the bottom of the content rendered by our PetView:

formattedDescription: ->
  "<h2>#{}</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...