v 2.14

 

CORE CONCEPTS

Routes

Models

Templates

Components

Controllers

Services

OTHER

Handlebars - templating engine

 

Ember Data - provides a consistent way to communicate with external APIs & manage application state

 

Helpers - transforms received data into desired format for Ember Data

ROUTING

Central part of an Ember app

 

It drives the application state based on the URL

 

The router displays a template depending on the route

 

Routes talk to the model to see what the data structure should be for displaying in the template

 

Routes deal mostly with the DS (data store)

MODELS

Models represent persistent state.

 

Models are part of Ember Data which gives you a single store, which is the central repository of models in your application.

 

Components and routes can ask the store for models, and the store is responsible for knowing how to fetch them. This allows the app to fetch the data once and save it in the store.

 

TEMPLATES

They describe how the UI should look

 

They are the views of an Ember app

 

Ember uses Handlebars to render HTML

 

Templates usually correspond to a parent route or a component

 

COMPONENTS

Components control how the user interface behaves.

*Components must have dash in their name eg my-post not post

 

Components consist of two parts:

  1. A source file written in JavaScript that defines the components behavior
  2. A template written in Handlebars.

 

Components handle all the lifecycle hooks

  • init, willRender, didRender, didUpdate, willDestroyElement...

CONTROLLERS

Controllers behave like a specialized type of Component that is rendered by the router when entering a Route.

 

The controller receives a single property from the Route – model – which is the return value of the Route's model() method.

 

Controllers are best used for interaction with a template, usually meant for actions

Getting Started

npm install -g ember-cli

 

ember new 'app-name'

 

 

Default Folder Structure

app

config - configure environment settings

public - contains assets, images & fonts

tests - automated tests

vendor - store frontend dependencies

Using the CLI

Generate route - ember g route `route-name`

 

Generate template - ember g `template-name`

 

Generate component - ember g `component-name`

 

Generate controller - ember g controller `controller-name`

 

Generate model - ember g model `model-name`

 

Run ember app - ember serve or ember s

 

Build for production - ember build --env production

 

Getting Started

1. Create a Route

  • This adds your route name to the router.js file
  • This also creates a file in the routes folder with the name of your new route​

 

 

 

 

2. Add functionality (if necessary) to the route file

  • You can leave it blank or tell it to explicitly render a template file
  • If you need data to render the view, define the model here

Getting Started

3. Create a Route Template

  • This creates a .hbs file to write HTML

 

 

4. Add HTML, links and data display to your template

Rendering Index

If you want your index to render a different view than just an index view:

  1. Create index route
    • This also creates a file in the routes folder with the name of your new route
    • It also creates an index.hbs template
  2. Decide what route should be used when you reach '/'
    • Inside the index.js route use the beforeModel() function to use this.replaceWith('name-of-different-route') to change which route is used at '/'

Creating a Model

Ember models use Ember Data, you need to structure the data of you app by extending the DS.Model

 

ember g model `model-name`

 

Creating a Component

When you create a component it creates a .js in the components folder and a .hbs file in the templates/components folder. Make sure you component name has a dash in it.

 

 

Inside the component's template add what you want to be displayed

Creating a Component

Inside the components .js file you want to add whatever logic or actions the component might need.

 

HELPERS

You can use helpers in Ember to change the displayed data value, so that you do not mutate original data

 

Example:

  • Our data model has 5 different property types: 
    • Condo, Townhouse, Apartment, Estate, House
  • We only want the user to see 2 options:
    • Community or Standalone
  • We create a helper that returns Community or Standalone depending on the property type in the model
  • Then in the template we can display this value instead of the original model value without changing the original model.

helpers/rental-property-type.js

templates/components/rental-listing.hbs

YIELD

To make components more reusable, make use of the {{yield}} functionality.

 

The component will then host basic logic and contain a {{yield}} statement after.

 

Then wherever you chose to render that component, you tell the component what the yield should be.

components/list-filter.hbs

template.hbs where component is being called

What about Controllers?

Controllers should be used when logic is needed based off the current route, rather than the component.

 

When should you use a controller?

  • When you want a route's child components to be able to share variable and actions
  • When you have a computed property that depends on the results of the model hook

 

I your logic and actions do not need to be shared with multiple components inside the same route, don't use a controller.

 

What about Services?

A Service is an Ember object that lives for the duration of the application, and can be made available in different parts of your application.

 

Services are useful for features that require shared state or persistent connections. Example uses:

  • User/session authentication.
  • Server-sent events or notifications.
  • Server-backed API calls that may not fit Ember Data.

 

Services are the injectable, you add them to the necessary compnents

RECAP

ROUTER

The main file that maps all the routes and their child routes, the router finds the corresponding route file (if needed)

 

 

 

ROUTES

The route file by default renders the template of the same name, you can tell the route file to render a different template instead. The route files are the route handler

 

 

 

 

ROUTES

The route is also where you would set the model needed for data display, and anything the template needs in order to render

 

 

 

 

 

ROUTES

Child Routes

To use child routes you nest those routes inside the parent route

 

ROUTES

Child Routes

If you want separate views for those child routes (meaning they are not just components), you need to create a folder in the templates folder with the name of you parent route, and inside that folder put all the templates needed for the child routes.

 

MODELS

Models represent your data structure in ember, they are part of Ember Data which gives you a single store, which is the central repository of models in your application.

 

TEMPLATES

Templates are handlebars files that describe how the UI should look.

 

Templates usually correspond to a parent route or a component

 

Templates are usually displayed in the following ways:

  • Route changes to /sample - renders sample template
  • Route changes to /sample but route file says to render the 'about' template - about template is rendered
  • A Main template (view/container) calls component inside it, that component template is then rendered
  • Route reaches a child route - /sample/new - it will render the 'new' template

COMPONENTS

Components control how the user interface behaves.

 

Components should host necessary actions and state of the application

 

Components consist of two parts:

  1. A  JavaScript file that defines the behavior
  2. A template written in Handlebars.

 

Components handle all the lifecycle hooks

  • init, willRender, didRender, didUpdate, willDestroyElement...

CONTROLLERS

Controllers should be used whenever logic and actions need to be shared between components on the same route

 

 

SERVICES

Services are useful for features that require shared state or persistent connections. They are injectable and allow information to be shared with components who need it.

 

They are similar to a controller but they are not route dependent.

 

IDEAL

STRUCTURE

MODELS

  • user
  • workspace
  • response
  • problem
  • comment
  • folder
  • tagging
  • selection
  • submission
  • auditable_mixin

New Models

  • answer
  • category
  • error
  • section

Change?

Keep

  • folderSet
  • import_request
  • new_workspace
  • pdSet
  • permission_mixin

ROUTES

Parent routes

  • auth
  • users
  • workspaces
  • responses
  • sections
  • problems
  • import work

​Maybe

  • answers
  • ​categories

CHILD ROUTES

  • auth
    • login
    • signup
  • users
    • user
    • new
  • responses
    • new
      • submission
      • workspace
      • folder
    • response
  • problems
    • problem
    • new

 

  • workspaces
    • index
    • mine
    • public
    • new
    • workspace
      • info
      • work
      • folders
        • workspace.folder
      • submissions
        • first
          • workspace.submissio
            • response
            • workpsace.submission.selections
              • workspace.submission.selection

TEMPLATES

Main Templates

  • index
  • application
  • unauthorized?

 

Pages (Folders - parent routes)

  • auth
  • problems
  • workspaces
  • workspace
  • responses
  • users

TEMPLATES

Main Templates

  • index
  • application
  • unauthorized?

 

Pages (Folders - parent routes)

  • auth
  • problems
  • workspaces
  • workspace
  • responses
  • users

COMPONENTS

Components

 

Controllers

 

Services, helpers, mixins

Do you love

Ember

By Philip Wisner

Made with Slides.com

Ember

  • 42

More from Philip Wisner