Add a view

codeninjasllc/codecombat

Fork 0

mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-27 01:25:42 -05:00

Table of Contents

Problem
Solution
Details
Resources

Problem

You want to create a new page on the CodeCombat website.

Solution

Create view, template, and style files and then tie the url to the view in the Router.

Details

First, create the three core files:

View file. In /app/views or one of the subfolders, create the view file. The name should be CamelCase, end with 'View', and be a CoffeeScript file. The contents should be something like this:

RootView = require 'views/core/RootView'
template = require 'templates/foo-view'

module.exports = class FooView extends RootView
  id: 'foo-view'
  template: template

  initialize: (options) ->
    # get things started here

Template file. In /app/templates, or one of the subfolders, create the template file. The name should be hyphenated, end with '-view', and be a jade file, and the subfolder-path should match the View's. The contents should look something like this:

extends /templates/base

block content
  p Hello World

Stylesheet (optional). In /app/styles, or one of the subfolders, create the stylesheet file. The name should be hyphenated, end with '-view', be a sass file, and the subfolder-path should match the View's. The contents should look something like this:

#foo-view
  color: black

Once the files are created, add the route to /app/core/Router.coffee. Use the go function to wrap around the path to the view file.

You should now be able to navigate to your new route and view your new view.

Resources

Backbone
[CoffeeScript] (http://coffeescript.org/)
Jade
Sass