Skip to content

An Ember.js Tutorial (Ember 1.2.0 / EmberData 1.0.0.beta.4)

License

Notifications You must be signed in to change notification settings

4goodapp/ember-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ember.js - Step by Step

Ember.js - Step by Step

A Step by Step Tutorial to help you get started with Ember.js. I’ve organized the commits so that you can follow along and clearly understand each step.

Sample Application

The sample application is a simple blog engine with posts and comments.

1. Blank page with Ember dependencies

Provides a simple HTML5 page with basic ember.js and dependencies (handlebars, jquery)

2. Basic Ember application object w/ logging

Added a basic Ember Javascript Application Object configure to load artifact generation and transitions

3. Added BlogPost Model and Ember Data dependency

The BlogPost Model represents a simple blog entry with just a title and a body

4. Wrapped the existing content in a Handlebars template

Ember will look for a Handlebars {{ }} template to render Changing the heading to dashboard (this will be a landing page for the blog)

5. Configure store to use Fixture Adapter/Create BlogPosts fixtures

Configure store to use Fixture Adapter and create some fixtures for BlogPosts

6. Application Router, BlogPosts Route, BlogPosts Template

Application Router sets the URL hierarchy for the application BlogPost Route provides a model property which is made available to the controller A template with data-template-name="BlogPosts" is added to iterate over the model (Array) an render each blog post

The link-to helper creates an anchor to an Ember route by name

8. Nested posts/new route, corresponding template and an outlet in posts template

Routes can be nested to provide a Resource-oriented set of URLs {{outlet}}s allow templates to follow the hierarchy of the application URLs/Routes

9. Implemented posts/new form

Used built-in views for the form elements and bound them to a newly created (empty) BlogPost

10. Application main layout template

The application template is the main layout of your application. The template without a data-template-name attributes becomes the application template

11. Dashboard BlogPost Count

Use a controller property to store the count of BlogPost records and display them on the dashboard page

12. BlogPost show Route

The BlogPost show route renders an individual post using the post id as the slug in the URL (dynamic segment)

13. BlogPost Comments as a nested resource

Shows controller dependencies And non-model bound controller parameters

14. BlogPost cancel button functionality

Transition to BlogPost.index on cancel

About

An Ember.js Tutorial (Ember 1.2.0 / EmberData 1.0.0.beta.4)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published