-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Add a view
Scott Erickson edited this page Jan 15, 2016
·
5 revisions
You want to create a new page on the CodeCombat website.
Create view, template, and style files and then tie the url to the view in the Router.
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.
- Backbone
- [CoffeeScript] (http://coffeescript.org/)
- Jade
- Sass
CodeCombat | Home | Blog | Forum | Teachers | Legal | Contribute
- Home
- Archmage Home
- Artisan Home
- Diplomat Home
- Archmage General
- Mission statement
- Coco Models
- Coding Guidelines
- Cookbook
- File system
- JSON Schema
- Technical overview
- Testing
- Third party software and services
- Artisan General
- Building A Level
- Coding Guidelines for Artisans
- Editing Thang Components
- Important Artisan Concepts
- Keyboard Shortcuts
- Debugging
- Artisan How-To Index
- Diplomat General
- i18n
- i18n Glossary nb
- i18n Glossary ru
- i18n Glossary es-419
- Dev Setup
- Dev Setup: Linux
- Dev Setup: Windows
- Dev Setup: Mac
- Dev Setup: Vagrant
- Dev Setup: Issues
- Game Engine
- Component
- Multiplayer
- Surface
- System
- Thang
- Thang Component System
- Tome
- World
- Artisan Tabs
- Components And Systems
- Scripts
- Settings
- Thangs
- Other
- Aether
- Client models
- Developer organization
- Educational Standards
- Events, subscriptions, shortcuts
- Chat Room
- Chat Room Rules
- Permissions
- Project Ideas List
- Treema
- Versioning
- Views