O'Reilly logo

CoffeeScript Programming with jQuery, Rails, and Node.js by Michael Erasmus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The to-do list view

Now let's expand our view to look like our real to-do application. Edit the index.jade file to look like the following:

doctype 5
html
  head
  title Collaborative Todo
  body
    section#todoapp
      header#header
        h1 todos
        input#new-todo(placeholder="What needs to be done?", autofocus=true)
      section#main
        ul#todo-list
      footer#footer
        button#clear-completed Clear completed

Here is some new Jade syntax that we haven't seen before. Tag IDs are denoted by the # symbol, so header#header becomes <header id="header">. Tag attributes are specified within brackets, like so: tag(name="value").

Since we're not using the message variable in our template anymore, we'll remove it from our render call in the app.coffee file, as shown in the following ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required