Notes

1http://speakingjs.com/↩

\n\n

2https://github.com/broccolijs/broccoli ↩

\n\n

3http://qunitjs.com/↩

\n\n

4https://github.com/airportyh/testem ↩

\n\n

5https://people.mozilla.org/~jorendorff/es6-draft.html ↩

\n\n

6http://expressjs.com/↩

\n\n

7The transpiling process is done with es6-module-transpiler.↩

\n\n

8To know more about AMD checkout their wiki ↩

\n\n

9Babel ↩

\n\n

10We recommend going through the documentation to get more insights on this adapter DS.JSONAPIAdapter.↩

\n\n\n

",{"_345":346,"_40":41,"_44":45,"_42":43,"_63":64,"_347":348,"_424":343},"previewContent","

\n \n
- \n What you need to know about this book\n
  - \n Audience: Programmers with basic JavaScript knowledge.\n
  - \n Why should I read this book?\n
  - \n How to read this book\n
  - \n Can I learn Ember 2.0 with this book?\n
  - \n But you are still talking about controllers!\n
  - \n Ember in 2016.\n
  - \n Demo code on GitHub\n
  - \n Reporting Errata - Suggesting Edits.\n
  \n
- \n Why Ember?\n
- \n Anatomy\n
- \n Conventions\n
- \n Getting started\n
  - \n Requirements\n
  - \n ember new\n
  \n
- \n Hands-on\n
  - \n Adding a friend resource\n
  - \n Connecting with a Backend\n
  - \n A word on Adapters\n
  - \n Listing our friends\n
  - \n Adding a new friend\n
  - \n Viewing a friend profile\n
  - \n Updating a friend profile\n
  - \n Deleting friends\n
  - \n Mockups\n
  - \n Installing Dependencies\n
  - \n Articles Resource\n
  - \n Defining relationships.\n
  - \n Nested Loans Index\n
  - \n Lending new articles\n
  - \n Computed Property Macros\n
  - \n Using components to mark a loan as returned.\n
  - \n Implementing auto save.\n
  - \n Route hooks\n
  \n
- \n Working with JavaScript plugins\n
  - \n Installing moment\n
  - \n It’s a global!\n
  - \n Wrapping globals\n
  - \n Writing an Ember helper: format-date.\n
  - \n Working with libraries with named AMD distributions.\n
  - \n ember-browserify\n
  - \n Wrapping up\n
  \n
- \n Components and Addons\n
  - \n Web Components\n
  - \n ember-cli addons\n
  - \n ember-cli-fill-murray\n
  - \n Consuming fill-murray in borrowers\n
  \n
- \n Ember Data\n
  - \n DS.Store Public API\n
  - \n findRecord: Loading a single record\n
  - \n Loading relationships\n
  - \n What to use?\n
  \n
- \n Computed Properties and Observers\n
  - \n Computed Property function signature\n
  - \n Computed Properties gotchas\n
  - \n Observers\n
  - \n Observing collections\n
  \n
- \n Driving our application state through the URL\n
  - \n Sorting friends.\n
  - \n Query Parameters\n
  - \n Refreshing the model when query parameters changes\n
  - \n Further Reading\n
  \n
- \n Testing Ember.js applications\n
  - \n Unit Testing\n
  - \n Acceptance Tests\n
  - \n Further Reading\n
  \n
- \n PODS\n
- \n Deploying Ember.js applications\n
  - \n Deploying to S3\n
  - \n Deploying to Pagefront\n
  - \n ember-cli-deploy\n
  \n
- \n Updating your project to the latest version of ember-cli\n
  - \n Wrapping up.\n
  \n
\n
\n Notes\n

What you need to know about this book

\n\n

This book is a beginners guide to the JavaScript framework Ember.

\n\n

Audience: Programmers with basic JavaScript knowledge.

\n\n

In order to understand this book, you should have some basic\nJavaScript knowledge. If you don’t, check out the book “Speaking\nJavaScript”¹ by Axel Rauschmayer, it’s free online.

\n\n

Why should I read this book?

\n\n

This book covers the basic features to help you build Ember\napplications. It is written in an informal style and tries to show you\ncommon pitfalls to then teach you how to solve those problems and why\nthey are bad ideas.

\n\n

How to read this book

\n\n

The book should be read sequentially since every chapter depends on\nfeatures built or introduced in previous chapters.

\n\n

Can I learn Ember 2.0 with this book?

\n\n

Yes, this book will help you learn the current version of Ember and\nwill be updated to reflect future changes (without extra cost), just\nmake sure you enable email notifications from leanpub.

\n\n

But you are still talking about controllers!

\n\n

If you are following Ember development, you might know controllers are\ngoing away being replaced by something called Routable\nComponents. This book talks about controllers but just the necessary\nstuff so you can use features that still depend on them, once\nRoutable Components are official, the book will be updated to\nreflect those changes.

\n\n

Ember in 2016.

\n\n

This book is being updated with features from Ember and best practices\nin 2016. Is still a work in progress, but if you enable notifications\nfrom Leanpub or follow me on twitter @abuiles, you’ll get the\nnotification when a new version is release.

\n\n

You can follow the changes in the following pull request\nhttps://github.com/abuiles/ember-101/pull/65.

\n\n

The upcoming version will use JSON API following the example from\nJSON API By Example, remove\nPODS, talk about the upcoming structure for projects and give more\nimportance to the use of components and how to avoid controllers.

\n\n

Demo code on GitHub

\n\n

The repository\nborrowers-2016 contains\nthe code for the application built in the book.

\n\n

Reporting Errata - Suggesting Edits.

\n\n

This book is licensed under creative commons, you can report errors or\nsuggest edits in the book’s repository\nember-101.

\n\n

I hope you enjoy the book!

\n\n

<3 Adolfo Builes (a.k.a @abuiles).

\n\n\n

Why Ember?

\n\n

Ember is an evolving JavaScript framework for creating “ambitious web\napplications”, it tries to maximize developers’ productivity using a set\nof conventions in a way that they don’t need to think about common\nidioms when building web applications.

\n\n

Using Ember in conjuntion with Ember CLI, allows you to reduce big\namounts of glue code, giving you the opportunity to focus on what is\nmost important for you: building your application.

\n\n

Glue code refers to those things that are not related to your\napplication but that every project requires. For\nexample, you need to test your code, compile your assets,\nserve your files in the browser, interact with a back-end API,\nperhaps use third party\nlibraries, and so on. All those things can be automated and, as it is\ndone in other frameworks, some conventions can provide a\ncommon ground to begin building your applications.

\n\n

Having a tool that does that for you not only eases the process of\nwriting your app but also saves you time and money (you\ndon’t have to think about problems that are already solved).

\n\n

Ember CLI aims to be exactly that tool. Thanks to Broccoli²,\nwaiting time is reduced while your assets compile. QUnit³ allows\nyou to write tests, which can then be run with Testem⁴.\nIf you need to deploy your build to production, you’ll get\nfingerprint, compression, and some other features for free.

\n\n

Ember CLI also encourages the use of ES6(ECMAScript 6)⁵. It\nprovides built-in support for modules and integrates easily with other\nplugins, allowing you to write your applications using other ES6\nfeatures.

\n\n

Next time you consider wasting your day wiring up all those things we\njust mentioned, consider Ember CLI. It will make your life easier\nand you will get support from a lot of smart people who are already\nusing this tool.

\n\n\n

Anatomy

In this chapter we will learn about the main components of Ember CLI.

\n\n

Ember CLI is a Node.js command line application that sits on top of\nother libraries.

\n\n

Its main component is Broccoli, a builder designed to keep builds as\nfast as possible.

\n\n

When we run ember server, Broccoli compiles our project and puts it\nin a directory where it can be served using Express.js⁶, a Node.js library. Express not only serves\nfiles but also extends Ember CLI functionality using its\nmiddlewares. An example of this is http-proxy, which supports\nthe --proxy option that allows us to develop against our development\nbackend.

\n\n

Out of the box, testing is powered by QUnit and Testem. By navigating to\nhttp:/localhost:4200/tests, our tests run automatically.\nWe can also run Testem in CI or --development mode with the ember\ntest command. We can also use other testing frameworks like Mocha thanks to the ember-cli-mocha addon.

\n\n

Ember CLI allows us to write our application using ES6 Modules. The\ncode is then transpiled (compiled)⁷ to AMD⁸ and\nfinally loaded with the minimalist AMD loader, loader.js.

\n\n

We can use CoffeeScript if we want, but it is recommended to use\nplain JS and ES6 modules where possible. In subsequent chapters, we’ll\nexplore its syntax and features. Ember CLI ships with Babel⁹ support,\nwhich allows us to use next generation JavaScript without extra work.

\n\n

Finally, we need to cover plugins that enhance the functionality of Broccoli. Each transformation your\nfiles go through is done with a Broccoli plugin, e.g.\ntranspiling, minifying, finger-printing, uglifying. You can have your\nown Broccoli plugins and plug them wherever you like throughout the build\nprocess.

\n\n\n

Conventions

\n\n

We will explore some of the basic conventions and best practices both\nin Ember and Ember CLI.

\n\n

Use camelCase even if you are writing CoffeeScript.
Avoid globals as much as possible: Ember CLI supports ES6 Modules out of the box so you can write your app in a modular way.
Create custom shims for apps that are not distributed in AMD format: we will cover this in a subsequent chapter, but the basic idea is to treat libraries that are not written with ES6 Modules as if they were.
Create reusable code: if there is a functionality you are using in several different places, remember that Ember offers an Ember.Mixin class that you can then reuse in different parts. If you think other people can benefit from this, create an add-on.
Name your files using kebab-case: Use hyphens instead of underscores to separate words in a file name. For example, if you have a model called InvoiceItem, Ember CLI expects this model to be under app/models/invoice-item.js.

\n\n\n

Getting started

\n\n

With this book, we’ll create an app to keep track of items\nwe lend to our friends. It’s a very simple app, but it will allow us to\nlearn Ember. At the same time, we’ll learn how to use Ember CLI\ngenerators, work with third party libraries, and write\nEmber CLI add-ons.

\n\n

Requirements

\n\n

Install Node.js. The easiest way is to download the installer from http://nodejs.org/.
Install the ember-inspector. Click here for Chrome or here for Firefox.
Install watchman for fast watching. We can start it with watchman watch ~/path-to-dir.
Make sure you are not required to run npm (Node’s package manager) with sudo. To test this, run the following command

\n\n

\n \n\n

npm -g install ember-cli\n

\n\n\n\n

If you were prompted to install as sudo, make sure you can run\nnpm without it. Tyler Wendlandt wrote an excellent tutorial for\ninstalling npm without sudo:\nhttp://www.wenincode.com/installing-node-jsnpm-without-sudo.\nIt’s very important that you are not required to run npm as sudo,\notherwise you will have problems when running Ember CLI.

\n\n

All set? Now let’s create our first Ember app.

\n\n

ember new

\n\n

Like other command line tools, Ember CLI comes with a bunch of useful\ncommands. The first one we will explore is new, which creates a\nnew project.

\n\n

Creating a new project

\n\n

ember new borrowers\n

\n\n\n\n

The new command will create a directory with the following structure:

\n\n

Project Structure

\n\n

|-- README.md\n|-- app\n|-- bower.json\n|-- bower_components\n|-- config\n|-- ember-cli-build.js\n|-- node_modules\n|-- package.json\n|-- public\n|-- testem.json\n|-- tests\n+-- vendor\n

\n\n\n\n

Change directory into your project.

\n\n\n\n\n\n

We will cover all the components as we move through this text, but the\nfollowing are the most important.

\n\n

\napp is where the app code is located: models, routes, templates, components and styles.
\ntests is where test code is located.
\nbower.json helps us manage JavaScript plugins via Bower.
\npackage.json helps us with JavaScript dependencies via npm.

\n\n\n\n

If everything is fine, we can do ember server and navigate to http://localhost:4200 where we should see a Welcome to Ember message.

\n\n\n

Hands-on

In the following sections we will add models to our application,\ndefine the interactions between them, and create an interface to add\nfriends, articles and allow us to keep track of the things we loaned\nthem.

\n\n

Adding a friend resource

The main model of our application will be called Friend. It\nrepresents the people who will borrow articles from us.

\n\n

Let’s add it with the resource generator.

\n\n

\n \n\n

$ ember generate resource friends firstName:string lastName:string  \\\n       email:string twitter:string\ninstalling model\n  create app/models/friend.js\ninstalling model-test\n  create tests/unit/models/friend-test.js\ninstalling route\n  create app/routes/friends.js\n  create app/templates/friends.hbs\nupdating router\n  add route friends\ninstalling route-test\n  create tests/unit/routes/friends-test.js\n

\n\n\n\n

If we open app/models/friend.js or app/routes/friends.js, we\nwill see that they have a similar structure.

\n\n

Object Structure

\n\n

import  Foo from 'foo';\n\nexport default Foo.extend({\n});\n

\n\n\n\n

What is that? ES6 Modules! As mentioned previously, ember CLI\nexpects us to write our code using ES6 Modules. import Foo from\n'foo' consumes the default export from the package foo and assigns\nit to the variable Foo. We use export default Foo.extend... to\ndefine what our module will expose. In this case we will export a\nsingle value, which will be a subclass of Foo.

\n\n\n\n

Now let’s look at the model and route.

\n\n

app/models/friend.js

\n\n

// We import the default value from ember-data/model into the variable Model.\n//\nimport Model from 'ember-data/model';\nimport attr from 'ember-data/attr';\n\n// Define the default export for this model, which will be a subclass\n// of ember data model.\n//\n// After this class has been defined, we can import this subclass doing:\n// import Friend from 'borrowers/models/friend'\n//\n// We can also use relative imports. So if we were in another model, we\n// could have written\n// import Friend from './friend';\n\nexport default Model.extend({\n\n  // attr is the standard way to define attributes with ember data\n  firstName: attr('string'),\n\n\n  // Defines an attribute called lastName of type **string**\n  lastName: attr('string'),\n\n\n  // ember data expects the attribute **email** on the friend's payload\n  email: attr('string'),\n\n  twitter: attr('string')\n});\n

\n\n\n\n

app/routes/friends.js

\n\n

// Assigns the default export from **ember** into the variable Ember.\n//\n// The default export for the ember package is a namespace that\n// contains all the classes and functions for Ember that are specified in\n// http://emberjs.com/api/\n\nimport Ember from 'ember';\n\n// Defines the default export for this module. For now we will not\n// add anything extra, but if we want to use a Route **hook** or\n// **actions** this would be the place.\n\nexport default Ember.Route.extend({\n});\n

\n\n\n\n

In a future version of ember we might be able to be more explicit\nabout the things we want to use from every module. Instead of writing\nimport Ember from ‘ember’, we could have import { Route } from\n‘ember/route’ or import { Model } from ‘ember-data/model’. This\nis currently possible in ES6 using Named Imports and\nExports.

\n\n\n\n

What about tests? If we open the test files, we’ll see that they are\nalso written in ES6. We’ll talk about that in a later chapter. Now\nlet’s connect to a backend and display some data.

\n\n

Connecting with a Backend

\n\n

We need to consume and store our data from somewhere. In this case, we\ncreated a public API (which follows JSON API)\nhttp://api.ember-101.com with Ruby on Rails. The\nfollowing are the API end-points.

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

Verb	URI Pattern
GET	/friends/:friend_id/relationships/loans(.:format)
POST	/friends/:friend_id/relationships/loans(.:format)
PUT	PATCH	/friends/:friend_id/relationships/loans(.:format)
DELETE	/friends/:friend_id/relationships/loans(.:format)
GET	/friends/:friend_id/loans(.:format)
GET	/friends(.:format)
POST	/friends(.:format)
GET	/friends/:id(.:format)
PATCH	/friends/:id(.:format)
PUT	/friends/:id(.:format)
DELETE	/friends/:id(.:format)
GET	/articles/:article_id/relationships/loans(.:format)
POST	/articles/:article_id/relationships/loans(.:format)
PUT	PATCH	/articles/:article_id/relationships/loans(.:format)
DELETE	/articles/:article_id/relationships/loans(.:format)
GET	/articles/:article_id/loans(.:format)
GET	/articles(.:format)
POST	/articles(.:format)
GET	/articles/:id(.:format)
PATCH	/articles/:id(.:format)
PUT	/articles/:id(.:format)
DELETE	/articles/:id(.:format)
GET	/loans/:lend_id/relationships/article(.:format)
PUT	PATCH	/loans/:lend_id/relationships/article(.:format)
DELETE	/loans/:lend_id/relationships/article(.:format)
GET	/loans/:lend_id/article(.:format)
GET	/loans/:lend_id/relationships/friend(.:format)
PUT	PATCH	/loans/:lend_id/relationships/friend(.:format)
DELETE	/loans/:lend_id/relationships/friend(.:format)
GET	/loans/:lend_id/friend(.:format)
GET	/loans(.:format)
POST	/loans(.:format)
GET	/loans/:id(.:format)
PATCH	/loans/:id(.:format)
PUT	/loans/:id(.:format)
DELETE	/loans/:id(.:format)

\n\n

If we do a GET request to http://api.ember-101.com/friends, we will get a list of\nall our friends.

\n\n

# The following output might be different for every run since the data\n# in the API is changing constantly.\n#\n$ curl http://api.ember-101.com/friends | python -m json.tool\n{\n  \"data\": [\n    {\n      \"id\": \"1\",\n      \"type\": \"friends\",\n      \"links\": {\n        \"self\": \"http://api.ember-101.com/friends/1\"\n      },\n      \"attributes\": {\n        \"first-name\": \"Cyril\",\n        \"last-name\": \"Neveu\",\n        \"email\": \"cyryl@neveu.com\",\n        \"twitter\": null\n      },\n      \"relationships\": {\n        \"loans\": {\n          \"links\": {\n            \"self\": \"http://api.ember-101.com/friends/1/relationships/loans\",\n            \"related\": \"http://api.ember-101.com/friends/1/loans\"\n          }\n        }\n      }\n    }\n  ],\n  \"links\": {\n    \"first\": \"http://api.ember-101.com/friends?page%5Blimit%5D=10&page%5Boffset%\\\n5D=0\",\n    \"last\": \"http://api.ember-101.com/friends?page%5Blimit%5D=10&page%5Boffset%5\\\nD=0\"\n  }\n}\n

\n\n\n\n\n\n

The previous payload follows JSON API and returns a list of resource\nobjects which will be used to populate ember data store.

\n\n\n\n

A word on Adapters

\n\n

Ember data has two mechanisms to translate request to the server and\ntransform incoming or outgoing data, such mechanisms are called an\nadapter and serializer. By default, ember data uses the\nDS.JSONAPIAdapter¹⁰, which expects your API to follow\nhttp://jsonapi.org/, a specification for\nbuilding APIs in JSON. In our example, we’ll be using this adapter\nsince our API is written using JSON API.

\n\n\n\n

Ember data doesn’t force us to use this adapter, we can work with\nothers or create our own. One of those adapters is the active model\nadapter, built for people using or following API similars to the ones\ncreated with\nactive model serializer,\nwhich uses a different convention for keys and naming. Everything is\nin snake_case and objects are linked in different ways.

\n\n

There are a bunch of different adapters for different projects and\nframeworks.

\n\n

Some of them are:

\n\n

We can find a longer list of adapters if we search GitHub for ember-data adapters.

\n\n

Playing with the resolver

\n\n

Before going deep into our app, let’s talk about something which will\nbe very useful while we build Ember applications and that thing is the\nresolver.

\n\n

The resolver is the system in charge of returning whatever Ember\nrequires at different stages, so if we need to load a template, route\nor service it all goes through the resolver. Normally people don’t\nneed to interact with it directly when building applications, but\nknowing that it is there and being able to idenfity whatever it is\ntrying to do might probably come handy while debugging our\napplications.

\n\n

To see it in action, let’s play with the console and examine how\nember tries to resolve things.

\n\n

First we need to go to config/environment.js and uncomment ENV.APP.LOG_RESOLVER. It should look like:

\n\n

config/environment.js

\n\n

  if (environment === 'development') {\n    ENV.APP.LOG_RESOLVER = true;\n    ENV.APP.LOG_ACTIVE_GENERATION = true;\n    // ENV.APP.LOG_TRANSITIONS = true;\n    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;\n    ENV.APP.LOG_VIEW_LOOKUPS = true;\n  }\n

\n\n\n\n

That line will log whatever ember tries to “find” to the browser’s\nconsole. If we go to http://localhost:4200\nand open the console, we’ll see something like the output below:

\n\n

\n \n\n

[ ] router:main .............. borrowers/main/router\n[ ] router:main .............. borrowers/router\n[✓] router:main .............. borrowers/router\n[ ] application:main ......... borrowers/main/application\n[ ] application:main ......... undefined\n[ ] application:main ......... borrowers/application\n[ ] application:main ......... borrowers/applications/main\n[ ] application:main ......... undefined\n

\n\n\n\n

That’s the ember resolver trying to find things. We don’t need to\nworry about understanding all of it right now.

\n\n

Coming back to the adapter, if we open the ember-inspector and\ngrab the instance of the application route

\n\n\n

\n\n\n\n\n

With the application route instance at hand, let’s have some fun.

\n\n

Let’s examine what happens if we try to find all our friends:

\n\n

\n \n\n

$E.store.findAll('friend')\n[ ] model:friend   .............borrowers/friend/model\n[ ] model:friend   .............borrowers/models/friend\n[✓] model:friend   .............borrowers/models/friend\n[✓] model:friend   .............borrowers/models/friend\n[✓] model:friend   .............borrowers/models/friend\n[ ] adapter:friend .............borrowers/friend/adapter\n[ ] adapter:friend .............undefined\n[ ] adapter:friend .............borrowers/adapters/friend\n[ ] adapter:friend .............undefined\n[ ] adapter:application ........borrowers/application/adapter\n[ ] adapter:application ........undefined\n[ ] adapter:application ........borrowers/adapters/application\n[ ] adapter:application ........undefined\n

\n\n\n\n

First, the resolver tries to find an adapter at the model level:

\n\n

\n \n\n

[ ] adapter:friend .............borrowers/friend/adapter\n[ ] adapter:friend .............undefined\n[ ] adapter:friend .............borrowers/adapters/friend\n[ ] adapter:friend .............undefined\n

\n\n\n\n

We can use this if we want to change the default behavior of ember data. For example, changing the way an URL is generated for a\nresource.

\n\n

Second, if no adapter is specified for the model, then the\nresolver checks if we specified an application adapter. As we\ncan see, it returns undefined, which means we didn’t specify one:

\n\n

\n \n\n

[ ] adapter:application ........borrowers/application/adapter\n[ ] adapter:application ........undefined\n[ ] adapter:application ........borrowers/adapters/application\n[ ] adapter:application ........undefined\n

\n\n\n\n

Third, if no model or application adapter is found, then ember data\nfalls back to the default adapter, the JSONAPIAdapter. We can\ncheck the implementation for this directly in the\nadapterFor\nfunction in ember data.

\n\n\n\n

Once ember data has resolved the adapter it tries to follow the logic\nto fetch all objects for a given resource. In ours we’ll find an error\nlike the following.

\n\n

\n \n\n

GET http://localhost:4200/friends 404 (Not Found)\n

\n\n\n\n

The requests failed because we aren’t connected to any backend.

\n\n

We need to stop the ember server and start again, but this time\nlet’s specify that we want all our API requests to be proxy to\nhttp://api.ember-101.com. To do so we use the option\n–proxy:

\n\n

Running ember server

\n\n

$ ember server --proxy http://api.ember-101.com\nProxying to http://api.ember-101.com\nLivereload server on port 35729\nServing on http://0.0.0.0:4200\n

\n\n\n\n

Let’s go back to the console and load all our friends, but this time\nlogging something with the response:

\n\n

$E.store.findAll('friend').then(function(friends) {\n  friends.forEach(function(friend) {\n    console.log('Hi from ' + friend.get('firstName'));\n  });\n});\n\nXHR finished loading: GET \"http://localhost:4200/friends\".\nHi from Cyril\n

\n\n\n\n

If we see ‘Hi from’ followed by a name, we have successfully connected\nto the backend. The output might be different every time we run it\nsince the API’s data is changing.

\n\n\n\n

Listing our friends

\n\n

Now that we have successfully made a request to our API, let’s\ndisplay our friends.

\n\n

By convention, the entering point for rendering a list of any kind of\nresource in web applications is called the Index. This normally\nmatches to the Root URL of our resource. With our friends example,\nwe do so on the backend through the following end-point\nhttp://api.ember-101.com/friends.\nIf we visit that URL, we will see a JSON list with all our\nfriends.

\n\n\n\n

In our ember application, we need to specify somehow that every\ntime we go to URL /friends, then all our users should be loaded and\ndisplayed in the browser. To do this we need to specify a Route.

\n\n

Routes are one of\nthe main parts of ember. They are in charge of everything\nrelated to setting up state, bootstrapping objects, specifying which\ntemplate to render, etc. In our case, we need a Route that will\nload all our friends from the API and then make them available to\nbe rendered in the browser.

\n\n

Creating our first Route.

\n\n

First, if we go to app/router.js, we will notice that the resource generator added this.route(‘friends’);.

\n\n

app/router.js

\n\n

// ...\n\nRouter.map(function() {\n  this.route('friends');\n});\n\n// ...\n

\n\n\n\n

We specify the URLs we want in our application inside the function\npassed to Router.map. There, we can declare new routes calling this.route.

\n\n

Let’s check the Routes that we have currently defined. To do so,\nopen the ember-inspector and click on Routes.

\n\n\n

By default, ember creates 4 routes:

\n\n

ApplicationRoute
IndexRoute
LoadingRoute
ErrorRoute

\n\n

We also see that the friends route was added with\nthis.route(‘friends’). if we pass a function as second\nor third argument, ember will create an Index,\nLoading, and Error Route.

\n\n

We can modify our route passing an empty function

\n\n

app/router.js

\n\n

this.route('friends', function() {\n});\n

\n\n\n\n

And then if we check the inspector, the children routes are automatically\ngenerated for the friends route.

\n\n\n\n

Since we just added a friends index route, visiting\nhttp://localhost:4200/friends should\nbe enough to list all our friends. But if we actually go there, the\nonly thing we will see is a message with Welcome to Ember.

\n\n

Let’s go to app/templates/friends.hbs and change it to look like the following:

\n\n

app/templates/friends.hbs

\n\n

<h1>Friends Route</h1>\n{{outlet}}\n

\n\n\n\n

For people familiar with Ruby on Rails, {{outlet}} is very similar\nto the word yield in templates. Basically it allows us to put content\ninto it. If we check the application templates\n(app/templates/application.hbs), we’ll find the following:

\n\n

app/templates/application.hbs

\n\n

<h2 id='title'>Welcome to Ember</h2>\n\n{{outlet}}\n

\n\n\n\n

When ember starts, it will render the application template as the\nmain template. Inside {{outlet}}, it will render the template\nassociated with the Route we are visiting. Then, inside those\ntemplates, we can have more {{outlet}} to keep rendering content.

\n\n

In our friends scenario, app/templates/friends.hbs will get\nrendered into the application’s template {{outlet}}, and then\nit will render the friends index template into\napp/templates/friends.hbs {{outlet}}.

\n\n

To connect everything, let’s create an index template and list all our\nfriends. Let’s run the route generator ember g route friends/index\nand put the following content inside\napp/templates/friends/index.hbs:

\n\n

app/templates/friends/index.hbs

\n\n

<h1>Friends Index</h1>\n\n<ul>\n  {{#each model as |friend|}}\n    <li>{{friend.firstName}} {{friend.lastName}}</li>\n  {{/each}}\n</ul>\n

\n\n\n\n\n\n

Next, we need to specify in the friends index route the data we\nwant to load in this route. The part in charge of loading the data\nrelated to a route is called the model hook. Let’s add one to\napp/routes/friends/index.js as follows:

\n\n

app/routes/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  //\n  // Here we are using ES6 syntax for functions!\n  // We can use this out of the box with ember-cli\n  // thanks to the addon ember-cli-babel\n  //\n  // To learn more about ES6, check http://s.abuiles.com/bwWo\n  //\n  model() {\n    return this.store.findAll('friend');\n  }\n});\n

\n\n\n\n\n\n

If we visit\nhttp://localhost:4200/friends we will\nsee something like the following along with a list of our friends:

\n\n\n

\n\n\n

We played previously with store.findAll to load all our friends from\nthe API and that’s what we are doing in the model hook. ember\nwaits for this call to be completed. When the data is loaded, it\nautomatically creates a friends index controller (or we can define a\ncontroller explicitly) and sets the property model with the content\nreturned from the API.

\n\n\n\n

We can also use store.findRecord or store.queryRecord if we want\nto load a record by a given id or appending query parameters to the\nrequest URL, such as this.store.findRecord(‘friend’, 1) or\nthis.store.query(‘friend’, {active: true}), which creates\nthe following requests to the API /api/friends/1 or\n/api/friends?active=true.

\n\n

When we do {{#each model as |friend|}}, ember takes\nevery element of the collection and set it as friend, the\ncollection which is what the model hook returned is referenced as\nmodel.

\n\n

If we want to display the total number of friends and the id for\nevery friend, then we just need to reference model.length in the\ntemplate and inside the each use friend.id:

\n\n

app/templates/friends/index.hbs

\n\n

<h1>Friends Index</h1>\n{{! The context here is the controller}}\n<h2>Total friends: {{model.length}}</h2>\n\n<ul>\n  {{#each model as |friend|}}\n    <li>{{friend.id}} - {{friend.firstName}} {{friend.lastName}}</li>\n  {{/each}}\n</ul>\n

\n\n\n\n

Again, because our model is a collection and it has the property\nlength, we can just reference it in the template as\nmodel.length.

\n\n

Adding a new friend

\n\n

We are now able to list our friends, but we don’t have a way to add\nnew friends. The next step is to build support for adding a new\nfriend.

\n\n

To do this we’ll need a friends new route under the route friends,\nwhich will handle the URL http://localhost:4200/friends/new.

\n\n\n\n

To add the new route, let’s run the route generator with the\nparameters friends/new:

\n\n

$ ember g route friends/new\ninstalling route\n  create app/routes/friends/new.js\n  create app/templates/friends/new.hbs\nupdating router\n  add route friends/new\ninstalling route-test\n  create tests/unit/routes/friends/new-test.js\n

\n\n\n\n

If we go to app/router.js we’ll see that the new route was nested\nunder the route friends:

\n\n

app/router.js

\n\n

this.route('friends', function(){\n  this.route('new');\n});\n

\n\n\n\n

Let’s add the following content on the new template:

\n\n

app/templates/friends/new.hbs

\n\n

<h1>Add a New Friend</h1>\n

\n\n\n\n

And then navigate to http://localhost:4200/friends/new:

\n\n\n

Notice how the friends new route got rendered in the\n{{outlet}} inside app/templates/friends.hbs.

\n\n

We got our route and template wired up, but we can’t add\nfriends yet. We need to set a new friend instance as the model of the\nfriends new route, and then create a form that will bind to the\nfriend’s attributes, and save the new friend in our backend.

\n\n

Following the logic we used in the friends index route, we need to\nreturn the model that will be the context of the friends new route.

\n\n

We need to edit app/routes/friends/new.js and add the following\nmodel hook:

\n\n

app/routes/friends/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.store.createRecord('friend');\n  }\n});\n

\n\n\n\n

We have been using the this.store without knowing what it is. The\nStore is an ember data class in charge of managing everything related to our model’s data. It knows about all the records we currently have loaded in our application and it has some functions that will help us to find, create, update, and delete records. During the whole application life cycle there is a unique instance of the Store, and it is injected as a property into every Route, Controller, Serializer, and adapter under the key store. That’s why we have been calling .store in our Routes and Controllers.

\n\n\n\n

The method we are using on the model hook store.createRecord\ncreates a new record in our application store, but it doesn’t save\nit to the backend. What we will do with this record is set it as the\nmodel of our friends new route. Then, once we have filled the\nfirst and last names, we can save it to our backend calling the method\n#save() in the model.

\n\n

Since we will be using the same form for adding a new friend and\nediting, let’s create an\nEmber component\nto contain the form, we can generate the component with the generator,\nember g component friends/edit-form and add the following content:

\n\n

app/templates/components/friends/edit-form.hbs

\n\n

<form {{action \"save\" on=\"submit\"}}>\n  <p>\n    <label>First Name:\n      {{input value=model.firstName}}\n    </label>\n  </p>\n  <p>\n    <label>Last Name:\n      {{input value=model.lastName }}\n    </label>\n  </p>\n  <p>\n    <label>Email:\n      {{input value=model.email}}\n    </label>\n  </p>\n  <p>\n    <label>Twitter:\n      {{input value=model.twitter}}\n    </label>\n  </p>\n  <input type=\"submit\" value=\"Save\"/>\n  <button {{action \"cancel\"}}>Cancel</button>\n</form>\n

\n\n\n\n

Then we should modify the template app/templates/friends/new.hbs\nto include the component:

\n\n

app/templates/friends/new.hbs

\n\n

<h1>Adding New Friend</h1>\n{{friends/edit-form}}\n

\n\n\n\n

Now if we visit http://localhost:4200/friends/new, the form should be displayed.

\n\n

There are some new concepts in what we just did. Let’s talk about them.

\n\n

Components

\n\n

In app/templates/friends/new.hbs we used

\n\n

Using component in app/templates/friends/new.hbs

\n\n

{{friends/edit-form model=model}}\n

\n\n\n\n

This is how components are rendered, we’ll have a whole section to talk\nabout components, but for now let’s say that they are isolated\n“templates”, they don’t know anything about the context surrounding\nthem, so we need to pass down all the necessary data for it to display\ncorrectly. In our example, the component required a property called\n“model” to work, so we are assigning our “current context” model to the\ncomponent’s model.

\n\n

The friend form is a perfect candidate for a component since we will\nbe using the same form to create and edit a new friend. The only\ndifference will be how “save” and “cancel” will behave under both\nscenarios.

\n\n

The {{action}} helper is one of the most useful features in\nember. It allows us to bind an action in the template to an action in\nthe component, controller or route. By default\nit is bound to the click action, but it can be bound to other actions.

\n\n

The following button will call the action cancel when we click it.

\n\n

<button {{action \"cancel\"}}>Cancel</button>\n

\n\n\n\n

And <form {{action “save” on=”submit”}}> will call the action\nsave when the onsubmit event is fired; that is, when we click Save.

\n\n\n\n

If we go to the browser http://localhost:4200/friends/new, open the\nconsole, and click Save and Cancel, we’ll see two errors. The first says\nNothing handled the action ‘save’ and the second Nothing handled the action\n‘cancel’.

\n\n

Ember expects us to define our action handlers inside the property\nactions in the component, controller or route. When\nthe action is called, ember looks for the definition in the\ncurrent context, so if we are inside the component, it will look at\nthe component.

\n\n

Let’s go to the component and add the actions save and cancel.

\n\n

app/components/friends/edit-form.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  actions: {\n    save() {\n      console.log('+- save action in edit-form component');\n    },\n    cancel() {\n      console.log('+- cancel action in edit-form component');\n    }\n  }\n});\n

\n\n\n\n

If we go to http://localhost:4200/friends/new and click save,\nwe’ll see in the browser’s console “save action in edit-form\ncomponent”.

\n\n

This action is running on the context of the component so if we do\nthis.get('model') we’ll get the record created on the model’s hook\nbecause we passed it down as an argument when rendering the component.

\n\n

A component not only receives objects but we can also pass it actions,\nby default the actions need to be specified in the context where we are\ncalling it, and to do so we use the action helper too.

\n\n

Let’s edit our friends/new template to add the save\nand cancel action, it should look like the following now:

\n\n

app/templates/friends/new.hbs

\n\n

{{friends/edit-form\n  model=model\n  save=(action \"save\")\n  cancel=(action \"cancel\")\n}}\n

\n\n\n\n

After adding the actions, we’ll see the following error in the console:

\n\n

\n \n\n

Uncaught Error: An action named 'save' was not found in (generated friends.new c\\\nontroller).\n

\n\n\n\n

The issue here is that we didn’t specify an action in the\nfriends/new controller. As mentioned previously controllers will be\nreplaced eventually but for now if we want to connect a component with\nits surrounding context then we need to use controllers too.

\n\n

We can create a controller using the controller generator like ember\ng controller friends/new and then let’s add the save and cancel\nactions:

\n\n

app/controllers/friends/new

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  actions: {\n    save(model) {\n      console.log('+--- save action called in friends new controller');\n    },\n    cancel() {\n      console.log('+--- cancel action called in friends new controller');\n    }\n  }\n});\n

\n\n\n\n

Now the route renders again but we won’t see the actions in the\ncontroller being called yet, the reason is that we need to call the\npassed action from the component’s action. To do so, let’s change our component as follows:

\n\n

app/components/friends/edit-form.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  actions: {\n    save() {\n      console.log('+- save action in edit-form component');\n\n      //\n      // We are calling the save action passed down when rendering the\n      // component: action=(action \"save\")\n      //\n      this.save(this.get('model'));\n    },\n    cancel() {\n      console.log('+- cancel action in edit-form component');\n\n      //\n      // We are calling the cancel action passed down when rendering the\n      // component: action=(action \"cancel\")\n      //\n      this.cancel();\n    }\n  }\n});\n

\n\n\n\n

How is this related to creating a new friend in our API? We’ll\ndiscover that after we cover the next helper. On the save action\nin the component, we’ll validate our model, and if it is valid\ncall the action in the controller which will take care of calling\n.save(), which saves it to the API, and finally transition to a\nroute where we can add new articles.

\n\n

The input helper

\n\n

Last we have the input helper. It allows us to automatically bind an\nhtml input field to a property in our model. With the following {{input\nvalue=firstName}}, changing the value changes the property firstName.

\n\n

Let’s modify our component’s template to include the following before the form:

\n\n

app/templates/components/friends/edit-form.hbs

\n\n

<div>\n  <h2>Friend details</h2>\n  <p>{{model.firstName}}</p>\n  <p>{{model.lastName}}</p>\n</div>\n

\n\n\n\n

And then go to the browser, we’ll see that every time we change the\nfirst or last name field, this will change the description in Friend details.

\n\n

We can also use the input helper to render other types of input such as a\ncheckbox.\nTo do so, simply specify type=’checkbox’.

\n\n

{{input type=\"checkbox\" name=trusted}}\n

\n\n\n\n

If we click the checkbox, the attribute trusted will be\ntrue. Otherwise, it will be false.

\n\n

Save it!

\n\n

We learned about actions, {{component}}, and {{input}}. Now\nlet’s save our friend to the backend.

\n\n

To do so, we are going to validate the presence of all the required\nfields. If they are present, call the action save which will call .save() on the model.\nOtherwise, we’ll see an error message on the form.

\n\n

First we’ll modify app/templates/components/friends/edit-form.hbs to include a field {{errorMessage}}.

\n\n

app/templates/components/friends/edit-form.hbs

\n\n

<form {{action \"save\" on=\"submit\"}}>\n  <h2>{{errorMessage}}</h2>\n

\n\n\n\n

We will see the error every time we try to save a record without first\nfilling in all the fields.

\n\n

Then we’ll implement a naive validation in\napp/components/friends/edit-form.js by adding a computed property\ncalled isValid:

\n\n

app/components/friends/edit-form.js

\n\n

export default Ember.Component.extend({\n  isValid: Ember.computed(\n    'model.email',\n    'model.firstName',\n    'model.lastName',\n    'model.twitter',\n    {\n      get() {\n        return !Ember.isEmpty(this.get('model.email')) &&\n          !Ember.isEmpty(this.get('model.firstName')) &&\n          !Ember.isEmpty(this.get('model.lastName')) &&\n          !Ember.isEmpty(this.get('model.twitter'));\n      }\n    }\n  ),\n  actions: {\n   ....\n  }\n});\n

\n\n\n\n

Ember.computed? That’s new! ember allows us to create functions\nthat will be treated as properties. These are called computed\nproperties. In our example, isValid is a computed property\nthat depends on the properties model.email, model.firstName,\nmodel.lastName, and model.twitter. When any of those\nproperties changes, the function that we passed-in is called and the\nvalue of our property is updated with the returned value.

\n\n

In our example, we are manually checking that all the fields are not\nempty by using the\nisEmpty\nhelper.

\n\n

With our naive validation in place, we can now modify our save and\ncancel actions:

\n\n

actions in app/components/friends/edit-form.js

\n\n

actions: {\n  save() {\n    console.log('+- save action in edit-form component');\n    if (this.get('isValid')) {\n      this.get('model').save().then((friend) => {\n        //\n        // This function gets called if the HTTP request succeeds\n        //\n        //\n        // We are calling the save action passed down when rendering\n        // the component: action=(action \"save\")\n        //\n        return this.save(friend);\n      }, (err) => {\n        //\n        // This gets called if the HTTP request fails.\n        //\n        this.set('errorMessage', 'there was something wrong saving the model');\n      });\n    } else {\n      this.set('errorMessage', 'You have to fill all the fields');\n    }\n  },\n  cancel() {\n    console.log('+- cancel action in edit-form component');\n\n    //\n    // We are calling the cancel action passed down when rendering the\n    // component: action=(action \"cancel\")\n    //\n    this.cancel();\n  }\n}\n

\n\n\n\n

When the action save is called, we are first checking if\nisValid is true, then we get the model and call .save(). The\nreturn of save() is a promise, which allows us to write\nasynchronous code in a sync manner. The function .then receives a\nfunction that will be called when the model has been saved\nsuccessfully to the server. When this happens, it returns an instance\nof our friend and then we can call the save action specified in the\ncontroller, in this function we’ll put the logic to transiton to the\nroute friends show where we can see our friend’s profile.

\n\n

If we click save and have filled all the required fields, we’ll see\nthat nothing happens after saving a new friend, but the action save\nwas called in the controller. Let’s change the controller as follows\nto include the transition logic:

\n\n

app/controllers/friends/new

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  actions: {\n    save(model) {\n      console.log('+--- save action called in friends new controller');\n\n      this.transitionToRoute('friends.show', model);\n    },\n    cancel() {\n      console.log('+--- cancel action called in friends new controller');\n    }\n  }\n});\n

\n\n\n\n

If we save a friend once more, we’ll get an error: The route\nfriends/show was not found. This is because we haven’t defined a\nfriends show route. We’ll do that in the next chapter.

\n\n\n\n

Whenever we want to access a property of an ember object, we need to\nuse this.get(‘propertyName’). It’s almost the same as doing\nobject.propertyName, but it adds extra features like handling\ncomputed properties. If we want to change the property of an object, we\nuse this.set(‘propertyName’, ‘newvalue’). Again, it’s almost\nequivalent to doing this.propertyName = ‘newValue’, but it adds\nsupport so the observers and computed properties that depend on the\nproperty are updated accordingly.

\n\n

Viewing a friend profile

\n\n

Let’s start by creating a friends show route

\n\n

$ ember g route friends/show --path=:friend_id\ninstalling route\n  create app/routes/friends/show.js\n  create app/templates/friends/show.hbs\nupdating router\n  add route friends/show\ninstalling route-test\n  create tests/unit/routes/friends/show-test.js\n

\n\n\n\n\n\n

If we open app/router.js, we’ll see the route show nested\nunder friends.

\n\n

app/router.js

\n\n

  this.route('friends', function() {\n    this.route('new');\n\n    this.route('show', {\n      path: ':friend_id'\n    });\n  });\n

\n\n\n\n

We have talked previously about path but not about dynamic segments.\npath: ‘:friend_id’ is specifying a dynamic segment.\nThis means that our route will start with /friends/\nfollowed by an id that will be something like /friends/12 or /friends/ned-stark.\nWhatever we pass to the URL, it will be available on the model hook under\nparams, so we can reference it like params.friend_id. This will\nhelp us to load a specific friend by visiting the URL\n/friends/:friend_id. A route can have any number of dynamic\nsegments (e.g., path: ‘/friends/:group_id/:friend_id’.)

\n\n

Now that we have a friends show route, let’s start first by editing\nthe template in app/templates/friends/show.hbs:

\n\n

app/templates/friends/show.hbs

\n\n

<ul>\n  <li>First Name: {{model.firstName}}</li>\n  <li>Last Name: {{model.lastName}}</li>\n  <li>Email: {{model.email}}</li>\n  <li>twitter: {{model.twitter}}</li>\n</ul>\n

\n\n\n\n

According to what we have covered, the next logical step would be to\nadd a model hook on the friends show route by calling\nthis.store.findRecord(‘friend’, params.friend_id). However, if we\ngo to http://localhost:4200/friends/new and add a new friend, we’ll be\nredirected to the friends show route and our friend will be loaded\nwithout requiring us to write a model hook.

\n\n

Why? As we have said previously, ember is based on convention over\nconfiguration. The pattern of having dynamic segments like\nmodel_name_id is so common that if the dynamic segment ends with\n_id, then the model hook is generated automatically and it calls\nthis.store(‘model_name’, params.model_name_id).

\n\n

Visiting a friend profile

\n\n

We can navigate to http://localhost:4200/friends to see all of our\nfriends, but we don’t have a way to navigate to their profiles!

\n\n

Fear not, ember has a helper for that as well, and it is called {{link-to}}.

\n\n

Let’s rewrite the content on app/templates/friends/index.hbs to\nuse the helper:

\n\n

app/templates/friends/index.hbs

\n\n

{{#each model as |friend|}}\n  <li>\n    {{#link-to 'friends.show' friend}}\n      {{friend.firstName}} {{friend.lastName}}\n    {{/link-to}}\n  </li>\n{{/each}}\n

\n\n\n\n

When we pass our intended route and an instance of a friend to\nlink-to, it maps the property id to the parameter\nfriend_id(we could also pass friend.id). Then, inside the\nblock, we render the content of our link tag, which would be the first\nand last name of our friend.

\n\n

One important item to mention is that if we pass an\ninstance of a friend to link-to, then the model hook in the\nfriends show route won’t be called. If we want the hook to be\ncalled, instead of doing {{#link-to 'friends.show' friend}}, we’ll\nhave to do {{#link-to 'friends.show' friend.id}}.

\n\n\n\n

The resulting HTML will look like the following

\n\n

Output for link-to helper

\n\n

<a id=\"ember592\" href=\"/friends/1\" class=\"ember-view\">\n  Cyril Neveu\n</a>\n

\n\n\n\n

If our friend model had a property called fullName, we could have\nwritten the helper with this other form of link-to which doesn’t\ninclude the block:

\n\n

Using a computed for the link content

\n\n

{{link-to friend.fullName \"friends.show\" friend}}\n

\n\n\n\n

We already talked about computed properties, so let’s add one called\nfullName to app/models/friend.js

\n\n

app/models/friend.js

\n\n

import Model from 'ember-data/model';\nimport attr from 'ember-data/attr';\nimport { belongsTo } from 'ember-data/relationships';\nimport Ember from 'ember';\n\nexport default Model.extend({\n  firstName: attr('string'),\n  lastName: attr('string'),\n  email: attr('string'),\n  twitter: attr('string'),\n  fullName: Ember.computed('firstName', 'lastName', {\n    get() {\n      return this.get('firstName') + ' ' + this.get('lastName');\n    }\n  })\n});\n

\n\n\n\n

The computed property depends on firstName and lastName. Any\ntime either of those properties changes, so will the value of\nfullName.

\n\n

Once we have the computed property, we can rewrite link-to without\nthe block as follows:

\n\n

Using friend.fullName in app/templates/friends/index.hbs

\n\n

{{link-to friend.fullName \"friends.show\" friend}}\n

\n\n\n\n

Now we’ll be able to visit any of our friends! Next, let’s add support\nto edit a friend.

\n\n

Quick Task

\n\n

Add a link so we can move back and forth between a friend’s profile and the friends index.
Add a link so we can move from app/templates/index.hbs to the list of friends (might need to generate the missing template).

\n\n

Updating a friend profile

\n\n

By now it should be clear what we need to update a friend:

\n\n

Create a route with the ember generator.
Update the template.
Add Controller and actions.

\n\n

To create the friends edit route we should run:

\n\n

$ ember g route friends/edit --path=:friend_id/edit\ninstalling route\n  create app/routes/friends/edit.js\n  create app/templates/friends/edit.hbs\nupdating router\n  add route friends/edit\ninstalling route-test\n  create tests/unit/routes/friends/edit-test.js\n

\n\n\n\n

The nested route edit should looks as follows under the the\nresource friends:

\n\n

app/router.js

\n\n

  this.route('friends', function() {\n    this.route('new');\n\n    this.route('show', {\n      path: ':friend_id'\n    });\n\n    this.route('edit', {\n      path: ':friend_id/edit'\n    });\n  })\n

\n\n\n\n\n\n

Then we should modify the template app/templates/friends/edit.hbs\nto render the edit friend component:

\n\n

app/templates/friends/edit.hbs

\n\n

<h1>Editing {{model.fullName}}</h1>\n{{friends/edit-form\n  model=model\n}}\n

\n\n\n\n

With that in place, let’s go to a friend’s profile and then append\n/edit in the browser (e.g., http://localhost:4200/friends/2/edit.)

\n\n\n

Thanks to the component, we have the same form as in the new\ntemplate without writing anything extra. If we open the browser’s\nconsole and click on Save and Cancel, we’ll see error because\nwe didn’t pass down the save and cancel actions which our\ncomponent depends on.

\n\n

Let’s create a friends.edit controller and implement those\nactions. The save action will behave exactly as the one in\nnew. The action cancel will be different; instead of\nredirecting to the friends index route, we’ll redirect back to the\nprofile page.

\n\n

We’ll create the controller using ember g controller.

\n\n

$ ember g controller friends/edit\ninstalling controller\n  create app/controllers/friends/edit.js\ninstalling controller-test\n  create tests/unit/controllers/friends/edit-test.js\n

\n\n\n\n

And then we can add the save and cancel actions:

\n\n

app/controllers/friends/edit.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  actions: {\n    save(model) {\n      this.transitionToRoute('friends.show', model);\n    },\n    cancel(model) {\n      this.transitionToRoute('friends.show', model);\n    }\n  }\n});\n

\n\n\n\n

After adding the actions, if we go to the edit template and click\ncancel or save we’ll still see an error. The problem is that we didn’t\nspecify the actions when rendering the component. Let’s change the\nedit form to pass the actions save and cancel.

\n\n

app/templates/friends/edit.hbs

\n\n

<h1>Editing {{model.fullName}}</h1>\n{{friends/edit-form\n  model=model\n  save=(action \"save\")\n  cancel=(action \"cancel\")\n}}\n

\n\n\n\n

If we refresh our browser, edit the profile, and click save, we’ll see\nour changes applied successfully. But if we click cancel it won’t\nwork as expected. The reason is that cancel need to receive the\nmodel as parameter.

\n\n

We can fix it by going to the friends/edit-form component and call\ncancel with the model.

\n\n

app/components/friends/edit-form.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  // ...\n  actions: {\n    // ...\n    cancel() {\n      this.cancel(this.get('model'));\n    }\n  }\n});\n

\n\n\n\n

To transition from a controller, we have been using\nthis.transitionToRoute. It’s a helper that behaves similarly to\nthe {{link-to}} helper but from within a controller. If we were in\na Route, we could have used this.transitionTo.

\n\n

Visiting the edit page.

\n\n

We can edit a friend now, but we need a way to reach the edit\nscreen from the user profile page. To do that, we should add a\n{{link-to}} in our app/templates/friends/show.hbs.

\n\n

app/templates/friends/show.hbs

\n\n

<ul>\n  <li>First Name: {{model.firstName}}</li>\n  <li>Last Name: {{model.lastName}}</li>\n  <li>Email: {{model.email}}</li>\n  <li>twitter: {{model.twitter}}</li>\n  <li>{{link-to \"Edit info\" \"friends.edit\" model}}</li>\n</ul>\n

\n\n\n\n

If we go to a friend’s profile and click Edit info, we’ll be taken\nto the edit screen page.

\n\n

Deleting friends

\n\n

We have decided not to lend anything to a couple of friends ever again\nafter they took our beloved The Dark Side of the Moon vinyl and\nreturned it with scratches.

\n\n

It’s time to add support to delete some friends from our application.\nWe want to be able to delete them directly within their profile\npage or when looking at the index.

\n\n

By now it should be clear how we will do this. Let’s use\nactions.

\n\n

Our destroy actions will call\nmodel#destroyRecord()\nand then this.transitionTo to the friends index route.

\n\n

Let’s replace our app/templates/friends/index.hbs so it includes the\ndelete action:

\n\n

app/templates/friends/index.hbs

\n\n

<h1>Friends Index</h1>\n\n<h2>Friends: {{model.length}}</h2>\n\n<table>\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    {{#each model as |friend|}}\n      <tr>\n        <td>{{link-to friend.fullName \"friends.show\" friend}}</td>\n        <td><a href=\"#\" {{action \"delete\" friend}}>Delete</a></td>\n      </tr>\n    {{/each}}\n  </tbody>\n</table>\n

\n\n\n\n

And then add the action *delete to the controller.

\n\n

app/controllers/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  actions: {\n    delete(friend) {\n      friend.destroyRecord();\n    }\n  }\n});\n

\n\n\n\n

To support deletion on friends show route, we just need to add\nthe same link with the action delete and implement the action in the controller.

\n\n

app/controllers/friends/show.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  actions: {\n    delete(friend) {\n      friend.destroyRecord().then(() => {\n        this.transitionToRoute('friends.index');\n      });\n    }\n  }\n});\n

\n\n\n\n

With that we can now create, update, edit, and delete any of our\nfriends!

\n\n

Next, let’s add some styling to our project. We don’t want to show\nthis to our friends as it is right now.

\n\n

Mockups

\n\n

Before changing our templates, we’ll review a couple of mockups to\nhave an idea of how our pages are going to look.

\n\n

Friends Index

\n\n\n

We’ll have a header that will take us to a dashboard, the friends\nindex page, and about page. Additionally, we can insert some content\ndepending on which route we are visiting. In the Friends Index\nRoute we’ll see a search box to filter users.

\n\n

Then we’ll have a table that can be ordered alphabetically or by\nnumber of items.

\n\n

friend profile

\n\n\n

\n $\"friend$ \n

friend profile

\n\n\n\n

Our friend profile will show us the user’s data with an avatar that we\nmight pull from Gravatar.

\n\n

We have links to add new articles, edit the user’s info,\nor delete the user’s profile.

\n\n

At the bottom we’ll have the list of all the articles the user has\nborrowed with options to mark them as returned or to send a\nreminder.

\n\n

If we are careful, we’ll also notice that the URL looks a little different\nfrom what we currently have. After the friend id, we see\n/articles (..com/friends/1/articlesloans). Whenever we visit the user\nprofile, the nested resource articles will be rendered by default. We\nhaven’t talked about it yet, but basically we are rendering a resource\nunder our friends show route that will defer all responsibility\nof managing state, handling actions, etc. to a different Controller\nand Route.

\n\n

Installing Dependencies

\n\n

To save time, we’ll be using Basscss as our\nbase CSS and fontello for icons.

\n\n

Including Basscss

\n\n

Basscss is distributed through npm or downloading directly from a CDN, but for our example we want to compile it ourselves and put it into our vendor.css. To do, let’s download the source file and put it in the directory vendor.

\n\n

Adding Basscss to the project

\n\n

curl https://unpkg.com/basscss@7.1.1/css/basscss.min.css > vendor/basscss.min.css\n

\n\n\n\n

The fact that a file is in the vendor directory doesn’t mean that\nthey’ll be included in our assets. We still need to tell ember CLI\nthat we want to import those assets into our application. To do\nso, we need to add the following line to our ember-cli-build.js before\nreturn app.toTree();

\n\n

Adding Basscss to the ember-cli-build.js

\n\n

/* global require, module */\nvar EmberApp = require('ember-cli/lib/broccoli/ember-app');\n\nmodule.exports = function(defaults) {\n  var app = new EmberApp(defaults, {\n  });\n\n  app.import('vendor/basscss.min.css');\n\n  return app.toTree();\n};\n

\n\n\n\n

app.import is a helper function that tells ember CLI to append\nvendor/basscss.min.css into our assets.\nBy default it will put any **CSS file we import into\n****/vendor.css** and any JavaScript file into /vendor.js.

\n\n

If we check app/index.html, we’ll see 2 CSS files included:

\n\n

app/index.html

\n\n

<link rel=\"stylesheet\" href=\"assets/vendor.css\">\n<link rel=\"stylesheet\" href=\"assets/borrowers.css\">\n

\n\n\n\n

The first one contains all the imported (vendor) CSS files and the\nsecond one contains the CSS files defined under app/styles.

\n\n\n\n

After modifying our ember-cli-build.js we need to stop and start the\nserver again so the changes are applied. Once we have done that, we\ncan refresh our browser and go to\nhttp://localhost:4200/assets/vendor.css, we’ll see that the code\nfor Basscss is there.

\n\n

Including fontello

\n\n

Because fontello doesn’t have a custom\ndistribution either, we can’t download it with bower, we’ll\ndownload a bundle of icons and fonts that we can manage manually by\nputting it under vendor/fontello.

\n\n\n\n

We can download a bundle from the following URL\nhttps://www.dropbox.com/s/bo2gi770ydxjc9v/fontello.zip?dl=0 and then\nput the content under vendor/, which will give us the directory\nvendor/fontello.

\n\n

In order to tell ember CLI that we want to include fontello’s\nCSS and fonts, we need to modify our Brocfile as follows:

\n\n

ember-cli-build.js

\n\n

/* global require, module */\nvar EmberApp = require('ember-cli/lib/broccoli/ember-app');\n\nmodule.exports = function(defaults) {\n  var app = new EmberApp(defaults, {\n  });\n\n  app.import('vendor/fontello/fontello.css');\n\n  app.import('vendor/fontello/font/fontello.ttf', {\n    destDir: 'assets/font'\n  });\n  app.import('vendor/fontello/font/fontello.eot', {\n    destDir: 'assets/font'\n  });\n  app.import('vendor/fontello/font/fontello.svg', {\n    destDir: 'assets/font'\n  });\n  app.import('vendor/fontello/font/fontello.woff', {\n    destDir: 'assets/font'\n  });\n  app.import('vendor/fontello/font/fontello.woff2', {\n    destDir: 'assets/font'\n  });\n\n  app.import('vendor/basscss.min.css');\n\n  return app.toTree();\n};\n

\n\n\n\n

We are already familiar with the line to import fontello.css, but\nthe following ones are new to us since we have never passed any option\nto import.

\n\n

The option destDir tells ember CLI that we want to put those\nfiles under a directory called assets/font. If we save and refresh our\nbrowser, vendor.css should now include fontello.css.

\n\n

With that, we know the basics of including vendor files. Now that we\nhave our basic dependencies on hand, let’s improve the appearance of\nour templates.

\n\n

The header

\n\n

We’ll use components to simplify our templates. In this case, our\ncomponent contains the code for the navigation bar. Let’s create a component call nav-bar and add the following content:

\n\n

app/templates/components/nav-bar.hbs

\n\n

<header class=\"h2 border\">\n  <nav class=\"flex item-center bg-white\">\n    {{link-to \"Borrowers\" \"index\" class=\"p2\"}}\n    {{link-to \"Dashboard\" \"index\" class=\"p2 icon-gauge\"}}\n    {{link-to \"Friends\" \"friends\" class=\"p2 icon-users-1\"}}\n    {{link-to \"New Friend\" \"friends.new\" class=\"p2 icon-user-add\"}}\n  </nav>\n</header>\n

\n\n\n\n

The header should always be visible in our application. In ember, the\nright receptacle for that content would be the application template\nsince it will contain any other template inside its {{outlet}}.

\n\n

Modify app/templates/application.hbs as follows:

\n\n

app/templates/application.hbs

\n\n

{{nav-bar}}\n\n<main class=\"clearfix\">\n  {{outlet}}\n</main>\n

\n\n\n\n

We will render the header and wrap the outlet in a row using\nbasscss classes.

\n\n

If we refresh, the header should display nicely.

\n\n

Friends Index

\n\n

First, let’s remove the <h1> from app/templates/friends.hbs so\nit only contains {{outlet}}. Next, clean up\napp/templates/friends/index.hbs so it adds the class primary to\nthe table:

\n\n

app/templates/friends/index.hbs

\n\n

<table class=\"mt3 fit\">\n  <thead class=\"p1 h2\">\n    <tr class=\"white bg-blue\">\n      <th>Name</th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody class=\"p1 h3\">\n    {{#each model as |friend|}}\n      <tr>\n        <td class=\"border-bottom\">\n          {{link-to friend.fullName \"friends.show\" friend}}\n        </td>\n        <td class=\"border-bottom\">\n          <a href=\"#\" {{action \"delete\" friend}}>Delete</a>\n        </td>\n      </tr>\n    {{/each}}\n  </tbody>\n</table>\n

\n\n\n\n

Now if we visit http://localhost:4200/friends, our friends and\nnavigation bar should look nicer.

\n\n

New Friend And Friend profile template

\n\n

Let’s edit app.css with the following:

\n\n

app/styles/app.css

\n\n

.borrowers-form .input,\n.borrowers-form textarea{\n    width: 100%;\n    font-size: 1.5em;\n    border: 1px solid rgba(196,197,200,.6);\n    padding: 30px;\n    margin-bottom: 20px;\n}\n

\n\n\n\n

And then edit the friends/edit-form component:

\n\n

app/templates/components/friends/edit-form.hbs

\n\n

<form {{action \"save\" on=\"submit\"}} class=\"col-8 px2 mx-auto borrowers-form\">\n  {{#if errorMessage}}\n    <h2 class=\"white bg-red p1\">{{errorMessage}}</h2>\n  {{/if}}\n  {{input value=model.firstName placeholder=\"First Name\" class=\"input fit\"}}<br>\n  {{input value=model.lastName  placeholder=\"Last Name\" class=\"input fit\"}}<br>\n  {{input value=model.email     placeholder=\"Email\" class=\"input fit\"}}<br>\n  {{input value=model.twitter   placeholder=\"Twitter\" class=\"input fit\"}}<br>\n  <button {{action \"cancel\"}} class=\"btn h3 border white bg-gray p2 mr2 col-3\">C\\\nancel</button>\n  <input type=\"submit\" value=\"Save\" class=\"btn h3 white bg-green border p2 mr2 c\\\nol-3\">\n</form>\n

\n\n\n\n

And let’s center friends/new with the following:

\n\n

app/templates/friends/new

\n\n

<div class=\"center\" >\n  <h1>Add a New Friend</h1>\n  {{friends/edit-form\n  model=model\n  save=(action \"save\")\n  cancel=(action \"cancel\")\n  }}\n</div>\n

\n\n\n\n

And finally, change app/templates/friends/show.hbs.

\n\n

app/templates/friends/show.hbs

\n\n

<div class=\"col-8 px2 mx-auto p1 h2 center\">\n  <p class=\"\">{{model.firstName}}</p>\n  <p class=\"\">{{model.lastName}}</p>\n  <p class=\"\">{{model.email}}</p>\n  <p class=\"\">{{model.twitter}}</p>\n  <p class=\"\">{{link-to \"Edit info\" \"friends.edit\" model}}</p>\n  <p class=\"\"><a href=\"#\" {{action \"delete\" model}}>delete</a></p>\n</div>\n

\n\n\n\n

The Dashboard

\n\n

By default, we’ll use the application index route as the dashboard.\nFor now, we are going to create the file app/templates/index.hbs\nand write a simple title:

\n\n

app/templates/index.hbs

\n\n

**<h2>Dashboard</h2>**.\n

\n\n\n\n

Let’s move on with more functionality.

\n\n

Articles Resource

\n\n

With our Friends CRUD ready, let’s create a similar interface to\nadd articles to our system.

\n\n

Let’s create an articles resource:

\n\n

$ ember generate resource articles name:string\n  create app/models/article.js\n  create tests/unit/models/article-test.js\n  create app/routes/articles.js\n  create app/templates/articles.hbs\n  create tests/unit/routes/articles-test.js\n

\n\n\n\n

Let’s check the model:

\n\n

app/models/article.js

\n\n

import Model from 'ember-data/model';\nimport attr from 'ember-data/attr';\n\nexport default Model.extend({\n  name: attr('string')\n});\n

\n\n\n\n

We have defined our Articles model successfully, but we need to\ncreate a full interface so we can add or remove articles to our\nsystem. We’ll add two more tabs to our navigation header, one to list\nall articles and the other one to add new ones.

\n\n

app/templates/components/nav-bar.hbs

\n\n

<header class=\"h2 border\">\n  <nav class=\"flex item-center bg-white\">\n    {{link-to \"Borrowers\" \"index\" class=\"p2\"}}\n    {{link-to \"Dashboard\" \"index\" class=\"p2 icon-gauge\"}}\n    {{link-to \"Friends\" \"friends\" class=\"p2 icon-users-1\"}}\n    {{link-to \"New Friend\" \"friends.new\" class=\"p2 icon-user-add\"}}\n    {{#link-to \"articles\" class=\"p2 icon-motorcycle\"}}\n      <span></span>Articles\n    {{/link-to}}\n    {{link-to \"New Article\" \"articles.new\" class=\"p2\"}}\n  </nav>\n</header>\n

\n\n\n\n

After adding this, we’ll see an error in the console because we\nhaven’t created yet the route for new articles.

\n\n

Let’s create the routes for creating, editing and showing\narticles. They will be very similar to what we did for friends.

\n\n

CRUD routes for articles

\n\n

$ ember g route articles/index\n$ ember g route articles/new\n$ ember g route articles/show --path=:article_id\n$ ember g route articles/edit --path=:article_id/edit\n

\n\n\n\n

And then we can wire the functionality following a similar pattern to\nthe one we did for friends. Add a model hook in the index and then\nrender every article. Create a edit-form component for articles. Use\nthe edit-form in the new and edit route.

\n\n

The articles index route should look like the following:

\n\n

app/routes/articles/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.store.findAll('article');\n  }\n});\n

\n\n\n\n

And for the template we can reuse the one from friends:

\n\n

app/templates/articles/index.hbs

\n\n

<table class=\"mt3 fit\">\n  <thead class=\"p1 h2\">\n    <tr class=\"white bg-blue\">\n      <th>Name</th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody class=\"p1 h3\">\n    {{#each model as |article|}}\n      <tr>\n        <td class=\"border-bottom\">\n          {{link-to article.name \"articles.show\" article}}\n        </td>\n        <td class=\"border-bottom\">\n          <a href=\"#\" {{action \"delete\" article}}>Delete</a>\n        </td>\n      </tr>\n    {{/each}}\n  </tbody>\n</table>\n

\n\n\n\n

Next we need to create the component for the article form:

\n\n

\n \n\n

$ ember g component articles/edit-form\n

\n\n\n\n

And add the following to the component’s template:

\n\n

app/templates/components/articles/edit-form.hbs

\n\n

<form {{action \"save\" on=\"submit\"}} class=\"col-8 px2 mx-auto borrowers-form\">\n  {{#if errorMessage}}\n    <h2 class=\"white bg-red p1\">{{errorMessage}}</h2>\n  {{/if}}\n  {{input value=model.name placeholder=\"Article name\" class=\"input fit\"}}<br>\n  <button {{action \"cancel\"}} class=\"btn h3 border white bg-gray p2 mr2 col-3\">C\\\nancel</button>\n  <input type=\"submit\" value=\"Save\" class=\"btn h3 white bg-green border p2 mr2 c\\\nol-3\">\n</form>\n

\n\n\n\n

Next, let’s modify the component so it does the validation and saves the\nmodel:

\n\n

app/components/articles/edit-form.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  isValid: Ember.computed.notEmpty('model.name'),\n  actions: {\n    save() {\n      if (this.get('isValid')) {\n        this.get('model').save().then((friend) => {\n          return this.save(friend);\n        }, () => {\n          this.set('errorMessage', 'there was something wrong saving the model');\n        });\n      } else {\n        this.set('errorMessage', 'You have to fill all the fields');\n      }\n    },\n    cancel() {\n      //\n      // We are calling the cancel action passed down when rendering the\n      // component: action=(action \"cancel\")\n      //\n      this.cancel(this.get('model'));\n    }\n  }\n});\n

\n\n\n\n

Then, we need to change the articles new template to render the\ncomponent:

\n\n

app/templates/articles/new.hbs

\n\n

<div class=\"center\" >\n  <h1>New Article</h1>\n  {{articles/edit-form\n    model=model\n    save=(action save)\n    cancel=(action cancel)\n  }}\n</div>\n

\n\n\n\n

If we go to http://localhost:4200/articles/new we’ll see an error in the conole saying: An action could not be made for save in <borrowers@controller:articles/new.

\n\n

If we look again at the template above, we’ll notice that the syntax to\ncall the action is slighty different to the one we use in friends\nnew. Instead of passing the name of the action as a string, we are\ncalling it as if it were a property in the controller.

\n\n

This is another way of using actions, and they are called closure\nactions. Introduced in the RFC\n0050-improved-actions.md,\nthese allow us to pass functions directly as actions. This means we\ndon’t need to define the action in the action object and we can\njust bind any function defined in the controller.

\n\n

To make save and cancel work, let’s create the the articles new\ncontroller running ember g controller articles/new and then add the\nfollowing content:

\n\n

app/controllers/articles/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  save(model) {\n    console.log('save action called in articles new');\n  },\n  cancel() {\n    console.log('cancel action called in articles new');\n  }\n});\n

\n\n\n\n

Once we have defined the actions in the controller then the template\nshould render. Next, if we try to save a new article, we’ll see that\nit doesn’t work. The reason is that we didn’t create a model hook on\nthe articles new route. Let’s do that next:

\n\n

app/routes/articles/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.store.createRecord('article');\n  }\n});\n

\n\n\n\n

We will leave as a task the rest of the routes, templates and\nactions. We still need to support edit, delete and show for\narticles. Also, use closure actions.

\n\n\n\n

Defining relationships.

\n\n

We’ll be using a join model to keep track of who borrowed what. The\nname for this join model will be “loan”. A loan belongs to one friend\nand one article. Friends and articles can have many loans.

\n\n

In other frameworks this is known as hasMany and\nbelongsTo relationships, and so are they in ember data.

\n\n\n\n

If we want to add a hasMany relationship to our models, we write:

\n\n

  loans: hasMany('loans')\n

\n\n\n\n

Or we want a belongsTo:

\n\n

  friend: DS.belongsTo('friend')\n

\n\n\n\n

Let’s run the resource generator to create the loan model:

\n\n

\n \n\n

$ ember g resource loans notes:string returned:boolean  createdAt:date friend:be\\\nlongsTo article:belongsTo\n

\n\n\n\n

If we open the loan model, it will look something like the following:

\n\n

app/models/loan.js

\n\n

import Model from 'ember-data/model';\nimport attr from 'ember-data/attr';\n\n//\n// We can export hasMany or belongsTo depending on the type of the\n// relationship.\n//\nimport { belongsTo } from 'ember-data/relationships';\n\nexport default Model.extend({\n  notes: attr('string'),\n  returned: attr('boolean'),\n  createdAt: attr('date'),\n  friend: belongsTo('friend'),\n  article: belongsTo('article'),\n});\n

\n\n\n\n

Next, using the relationship types, we can modify our Article model:

\n\n

app/models/article.js

\n\n

import Model from 'ember-data/model';\nimport attr from 'ember-data/attr';\nimport { hasMany } from 'ember-data/relationships';\n\nexport default Model.extend({\n  name: attr('string'),\n  loans: hasMany('loan')\n});\n

\n\n\n\n

And our Friend model:

\n\n

app/models/friend.js

\n\n

import Model from 'ember-data/model';\nimport attr from 'ember-data/attr';\nimport { hasMany } from 'ember-data/relationships';\nimport Ember from 'ember';\n\nexport default Model.extend({\n  firstName: attr('string'),\n  lastName: attr('string'),\n  email: attr('string'),\n  twitter: attr('string'),\n  loans: hasMany('loan'),\n  fullName: Ember.computed('firstName', 'lastName', {\n    get() {\n      return this.get('firstName') + ' ' + this.get('lastName');\n    }\n  })\n});\n

\n\n\n\n

With those two lines, we have added a relationship between our\nmodels. Now let’s work on the loans resource.

\n\n

Nested Loans Index

\n\n

In our friend profile, we specified that we wanted to render\nthe list of articles as a nested route inside the friend profile.

\n\n

To handle this scenario. We need to make sure that loans\nis specified as a nested resource inside friends show. Let’s go to\nour app/router.js and change it to reflect this:

\n\n

app/router.js

\n\n

import Ember from 'ember';\nimport config from './config/environment';\n\nconst Router = Ember.Router.extend({\n  location: config.locationType\n});\n\nRouter.map(function() {\n  this.route('friends', function() {\n    this.route('new');\n\n    // Here we are nesting loans under friends/show.\n    this.route('show', {\n      path: ':friend_id'\n    }, function() {\n      this.route('loans', {resetNamespace: true}, function() {\n      });\n    });\n\n    this.route('edit', {\n      path: ':friend_id/edit'\n    });\n  });\n});\n\nexport default Router;\n

\n\n\n\n\n\n

Now let’s open the ember-inspector and check our newly defined\nroutes.

\n\n

We can identify the routes and controllers that ember expects us to\ndefine for the new resource.

\n\n

Next we need to add an {{outlet }} to\napp/templates/friends/show.hbs, which is where the nested routes will render:

\n\n

app/templates/friends/show.hbs

\n\n

<div class=\"clearfix flex p3 h2\">\n  <div class=\"\">\n    <img src=\"http://www.fillmurray.com/200/200\">\n    <p class=\"\">{{model.fullName}}</p>\n    <p class=\"\">{{model.email}}</p>\n    <p class=\"\">{{model.twitter}}</p>\n    <p class=\"\">{{link-to \"Edit info\" \"friends.edit\" model}}</p>\n    <p class=\"\"><a href=\"#\" {{action \"delete\" model}}>Delete</a></p>\n  </div>\n  <div class=\"flex-auto ml1 loans-container\">\n    {{outlet}}\n  </div>\n</div>\n

\n\n\n\n

Any nested route will be rendered by default into its parent’s\n{{outlet}}.

\n\n

Rendering the index.

\n\n

Let’s create a new file called app/templates/loans/index.hbs\nand write the following:

\n\n

app/templates/loans/index.hbs

\n\n

<h2>Loans Index</h2>\n

\n\n\n\n

If we visit a friend profile, we won’t see anything related with\nthe loans index route. Why? Well, we are not visiting that\nroute, that’s why. To get to the loans index route, we need to\nmodify the link-to in app/templates/friends/index.hbs to reference\nthe route loans instead of friends.show. We’ll still pass\nthe friend as an argument since the route loans is nested\nunder friends.show and it has the dynamic segment :friend_id.

\n\n

app/templates/friends/index.hbs

\n\n

<td>{{link-to friend.fullName \"loans\" friend}}</td>\n

\n\n\n\n

Now, with the previous change, if we go to the friends index and visit\nany profile, we’ll see Loans Index at the bottom.

\n\n

If we open the ember-inspector and filter by *Current Route\nonly**, we’ll see loans.index at the last route.

\n\n

Routes are resolved from top to bottom, so when we navigate to\n/friends/1/loans it will go first to the application route,\nthen move to friends show route to fetch our friend. Once it is\nloaded, it will move to loans index route.

\n\n

Next we need to define the model hook for the loans index route.

\n\n

Fetching our friend loans.

\n\n

Let’s add the loans index route to the generator and reply\n‘no’ when it asks us if we want to overwrite the template.

\n\n

\n \n\n

$ ember g route loans/index\ninstalling route\n[?] Overwrite app/templates/articles/index.hbs? (Yndh) n\n\n[?] Overwrite app/templates/articles/index.hbs? No, skip\n  create app/routes/articles/index.js\n  skip app/templates/articles/index.hbs\nupdating router\n  add route articles/index\ninstalling route-test\n  create tests/unit/routes/articles/index-test.js\n

\n\n\n\n

In app/routes/loans/index.js, load the data using the model\nhook:

\n\n

app/routes/loans/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.modelFor('friends/show').get('loans');\n  }\n});\n

\n\n\n\n

In the model hook, we are using a new function\nthis.modelFor\nthat helps us grab the model for any parent route. In this scenario,\nparent routes are all the ones appearing on top of articles index\nroute in the ember-inspector.

\n\n

Once we get the model for friends show route, we simply ask for\nits loans. And that’s what we are returning.

\n\n

We need to modify the app/templates/loans/index.hbs so it\ndisplays the loans:

\n\n

app/templates/loans/index.hbs

\n\n

<table>\n  <thead>\n    <tr>\n      <th>Description</th>\n      <th>Borrowed since</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    {{#each model as |loan|}}\n      <tr>\n        <td>{{loan.article.name}}</td>\n        <td>{{loan.notes}}</td>\n        <td>{{loan.createdAt}}</td>\n        <td></td>\n        <td></td>\n      </tr>\n    {{/each}}\n  </tbody>\n</table>\n

\n\n\n\n

If our friend hasn’t borrowed any article yet, we can use the\nember-inspector to create a loan manually.

\n\n

Let’s open the ember-inspector and select the model in the route friends.show.

\n\n

Once we have the instance of a friend assigned to the variable $E,\nlet’s run the following on the browser’s console:

\n\n

$E.get('loans').createRecord({notes: 'foo'})\n$E.get('loans').createRecord({notes: 'bar'})\n

\n\n\n\n

We will see that our loans list updates automatically with the created\nrecords.

\n\n

So far we are only putting records into the store, but they are not\nbeing saved to the backend. To do that we’ll need to call save()\non every instance. Let’s try to call save:

\n\n

$E.get('loans').createRecord({notes: 'test'}).save()\n

\n\n\n\n

We will notice that a POST is attempted to our backend,\nbut it gets rejected because the model is not valid:

\n\n

Error: The backend rejected the commit because it was invalid.\n

\n\n\n\n

And if we look at the response in the network tab, we’ll see that\nthere is an error with the message article - can't be blank. Let’s\ngrab an article and then create a loan including the article.

\n\n

$E.get('store').findAll('article')\narticle = $E.get('store').peekAll('article').get('firstObject')\n$E.get('loans').createRecord({notes: 'a loan', article: article}).save()\n

\n\n\n\n

In the previous snippet, we are using two methods from ember data’s\nstore, the first makes a request to download all the available\narticles in the API and puts them in the store, and the second one is\n“fetching” all the records from the store (without firing a HTTP\nrequest) and we call firstObject with returns the first record in the\nlist.

\n\n

Then, with that record we are creating a new loan.

\n\n

Let’s add the route loans new and the template so we can lend\nnew articles to our friends.

\n\n

Lending new articles

\n\n

Let’s start by adding the route. We’ve done it\nwith the generator up to this point, but now we’ll do it manually.

\n\n

We need to add the nested route new under the resource loans:

\n\n

app/router.js

\n\n

import Ember from 'ember';\nimport config from './config/environment';\n\nvar Router = Ember.Router.extend({\n  location: config.locationType\n});\n\nRouter.map(function() {\n  this.route('friends', function() {\n    this.route('new');\n\n    this.route('show', {\n      path: ':friend_id'\n    }, function() {\n      this.route(loans, {resetNamespace: true}, function() {\n        this.route('new');\n      });\n    });\n\n    this.route('edit', {\n      path: ':friend_id/edit'\n    });\n  });\n\n  // ...\n});\n\nexport default Router;\n

\n\n\n\n

Then let’s create the route app/routes/loans/new.js with the\nmodel hook:

\n\n

app/routes/loans/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.store.createRecord('loan', {\n      friend: this.modelFor('friends/show')\n    });\n  }\n});\n

\n\n\n\n

In the model hook we use\nthis.store.createRecord,\nwhich creates a new instance of a model in the store. It takes the\nname of the model we’re creating and its properties.

\n\n

We pass the property friend, which will make sure that the loan is\nlinked with our friend. For the article we still need to add something\nlike a select where the user can choose an article.

\n\n

Ember data allows us to specify a defaultValue for our attributes.\nWe can use that to set notes as an empty string. In\napp/models/loan.js, let’s replace the definition of notes so\nit looks as follows:

\n\n

app/models/loan.js

\n\n

  notes: DS.attr('string', {defaultValue: ''})\n

\n\n\n\n

Next we need to add the new template. Since we might want to reuse\nthe form, let’s add it as a component and then include it in the\ntemplate.

\n\n

We can follow a similar pattern to the one used with articles and\nfriends. Let’s create a component called loans/edit-form and\nthen pass the necessary data for it to function properly.

\n\n

Let’s run the following command: ember g component loans/edit-form and then edit the template with the form.

\n\n

app/templates/components/loans/edit-form.hbs

\n\n

<form {{action \"save\" on=\"submit\"}} class=\"\">\n  {{#if errorMessage}}\n    <h2 class=\"white bg-red p1\">{{errorMessage}}</h2>\n  {{/if}}\n  <label>Select an article</label>\n  <select class=\"select\">\n    <option>Article 1</option>\n    <option>Article 2</option>\n    <option>Article 3</option>\n  </select>\n  <br>\n  {{textarea value=model.notes placeholder=\"Notes\" class=\"textarea\" cols=\"50\" ro\\\nws=\"10\"}}\n  <br>\n  <button {{action \"cancel\"}} class=\"btn border white bg-gray\">Cancel</button>\n  <input type=\"submit\" value=\"Save\" class=\"btn white bg-green border\">\n</form>\n

\n\n\n\n

Then include it in app/templates/loans/new.hbs:

\n\n

app/templates/loans/new.hbs

\n\n

{{loans/edit-form model=model class=\"ml3\"}}\n

\n\n\n\n

We almost have the basics ready. We have set up the route and\ntemplate, but we still haven’t added a link to navigate to the\narticles new route. Let’s add link-to to articles.new in\napp/templates/friends/show.hbs:

\n\n

app/templates/friends/show.hbs

\n\n

<div class=\"clearfix flex p3 h2\">\n  <div class=\"\">\n    <img src=\"http://www.fillmurray.com/200/200\">\n    <p class=\"\">{{model.fullName}}</p>\n    <p class=\"\">{{model.email}}</p>\n    <p class=\"\">{{model.twitter}}</p>\n    <p>{{link-to \"Lend article\" \"loans.new\"}}</p>\n    <p class=\"\">{{link-to \"Edit info\" \"friends.edit\" model}}</p>\n    <p class=\"\"><a href=\"#\" {{action \"delete\" model}}>Delete</a></p>\n  </div>\n  <div class=\"flex-auto ml1 loans-container\">\n    {{outlet}}\n  </div>\n</div>\n

\n\n\n\n

We are creating the link with {{link-to \"Lend article\"\n\"loans.new\"}}. Since we’re already in the context of a\nfriend, we don’t need to specify the dynamic segment. If we want to add\nthe same link in the friends index route, we’ll need to\npass the parameter as {{link-to “Lend article” “loans.new”\nfriend}} where friend is an instance of a friend.

\n\n

Completing the form

\n\n

We have the route, template and component for new loans but the select\nis not showing the list of articles that we can loan to a\nfriend. Let’s build that next, and then connect the cancel and\nsave actions.

\n\n

Instead of building the select ourselves, we are going to use an addon\ncalled ember-power-select which\ngive us a nice select component.

\n\n

Ember addons offer us an easy way to share code and augment ember-cli,\nwe’ll be building one in a subsequent chapter, but for now, let’s\nstart consuming them.

\n\n

We can install the addon running the ember install command, we need to\nstop the ember-cli server and then run the following:

\n\n

\n \n\n

ember install ember-power-select\n

\n\n\n\n

Once our addon has been installed, we can edit the loans/edit-form to use it:

\n\n

app/templates/components/loans/edit-form.hbs

\n\n

<form {{action \"save\" on=\"submit\"}} class=\"borrowers-form\">\n  {{#if errorMessage}}\n    <h2 class=\"white bg-red p1\">{{errorMessage}}</h2>\n  {{/if}}\n  <label>Select an article</label>\n  {{#power-select class=\"select\"\n     selected=model.article\n     options=articles\n     onchange=(action (mut model.article)) as |article|}}\n    {{article.name}}\n  {{/power-select}}\n  <br>\n  {{textarea value=model.notes\n    placeholder=\"Notes\"\n    class=\"textarea\"\n  }}\n  <br>\n  <button {{action \"cancel\"}} class=\"btn border white bg-gray\">Cancel</button>\n  <input type=\"submit\" value=\"Save\" class=\"btn white bg-green border\">\n</form>\n

\n\n\n\n

As we can see, the addon takes as options the current selected option,\nwhich in our example would be model.article. Then it takes the list\nof options which will be used to populate the select and also has an\naction which gets called every time the selection changes.

\n\n

In the action we are using the mut helper which give us a special\naction to update a property. The following onchange=(action (mut\nmodel.article)) can be read as “On change, change the property\nmodel.article which the selected valued”. We are not seeing the\nparameter, but the addon passes it explicitly.

\n\n

We could have also written a function in the component like the following:

\n\n

\n \n\n

changeArticle(article) {\n  this.set('model.article', article)\n}\n

\n\n\n\n

And then pass it as the onchange action: onchange=(action changeArticle).

\n\n

If we start the server and go to the form for new loans, we’ll see\nthat the select is being displayed but the articles are not listed,\nthe reason for that is that we haven’t populated the articles\nattribute.

\n\n

To do so, we’ll be creating a computed property in the component and then calling store.findAll, let’s go to loans/edit-form component an add the following:

\n\n

app/components/loans/edit-form.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  //\n  // By default the store is not injected into components, so we use\n  // the \"inject.service\" helper to make it available.\n  //\n  store: Ember.inject.service(),\n  articles: Ember.computed({\n    get() {\n      //\n      // Since we are using Ember.inject.service, we need to call the\n      // store using the get helper\n      //\n      return this.get('store').findAll('article');\n    }\n  }).readOnly()\n});\n

\n\n\n\n

Now if we refresh again, we’ll see that the list of articles are now\nin the select.

\n\n

Next, we need to bind the new and cancel actions.

\n\n

After successfully making a new loan or clicking cancel, we want to\nnavigate back to the loans.index for the friend. To do so, let’s\nwrite an action in the controller that we can use in both scenarios.

\n\n

Let’s create the controller using the generator: ember g controller\nloans/new and then add the following content:

\n\n

app/controllers/loans/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  backToIndex(friend) {\n    this.transitionToRoute('loans.index', friend);\n  }\n});\n

\n\n\n\n

Then in the loans.new template, pass down the action:

\n\n

app/templates/loans/new.hbs

\n\n

{{loans/edit-form model=model back=(action backToIndex) class=\"ml3\"}}\n

\n\n\n\n

And finally we need to connect the back action in the component and\nchange the way we call the save and cancel actions:

\n\n

app/components/loans/edit-form.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  //\n  // By default the store is not injected into components, so we use\n  // the \"inject.service\" helper to make it available.\n  //\n  store: Ember.inject.service(),\n  articles: Ember.computed({\n    get() {\n      //\n      // Since we are using Ember.inject.service, we need to call the\n      // store using the get helper\n      //\n      return this.get('store').findAll('article');\n    }\n  }).readOnly(),\n  //\n  // Save and cancel are not declared inside actions key, we'll be\n  // using it as closure actions.\n  //\n  save() {\n    //\n    // We probably want to verify here that the model has an article\n    // before saving\n    //\n    this.get('model').save().then((model) => {\n      this.back(model.get('friend'));\n    }, () => {\n      this.set(\n        'errorMessage',\n        'there was something wrong saving the loan'\n      );\n    });\n  },\n  cancel() {\n    this.back(this.get('model.friend'));\n  }\n});\n

\n\n\n\n

To finish, we need to change the save and cancel actions so we use\nthe closure action format instead of “quoted” format.

\n\n

app/templates/components/loans/edit-form.hbs

\n\n

<form {{action save on=\"submit\"}} class=\"borrowers-form\">\n  {{#if errorMessage}}\n    <h2 class=\"white bg-red p1\">{{errorMessage}}</h2>\n  {{/if}}\n  <label>Select an article</label>\n  {{#power-select class=\"select\"\n     selected=model.article\n     options=articles\n     onchange=(action (mut model.article)) as |article|}}\n    {{article.name}}\n  {{/power-select}}\n  <br>\n  {{textarea value=model.notes\n    placeholder=\"Notes\"\n    class=\"textarea\"\n  }}\n  <br>\n  <button {{action cancel}} class=\"btn border white bg-gray\">Cancel</button>\n  <input type=\"submit\" value=\"Save\" class=\"btn white bg-green border\">\n</form>\n

\n\n\n\n

If we go to a friend profile and click “Lend article”, we’ll be able\nto create a new loan.

\n\n

Computed Property Macros

\n\n

In app/components/friends/edit-form.js, we define the computed\nproperty isValid with the following code:

\n\n

Computed Property isValid in app/components/friends/edit-form.js

\n\n

  isValid: Ember.computed(\n    'model.email',\n    'model.firstName',\n    'model.lastName',\n    'model.twitter',\n    {\n      get() {\n        return !Ember.isEmpty(this.get('model.email')) &&\n          !Ember.isEmpty(this.get('model.firstName')) &&\n          !Ember.isEmpty(this.get('model.lastName')) &&\n          !Ember.isEmpty(this.get('model.twitter'));\n      }\n    }\n  ),\n

\n\n\n\n

Although the previous code does what we expect, it is not the most\npleasant to read, especially with all those nested &&’s. As it\nturns out, Ember has a set of helper functions that will allow us to\nwrite the previous code in a more idiomatic way using something called\ncomputed property macros.

\n\n

Computed property macros are a set of functions living under\nEmber.computed. that allow us to create computed properties in an\neasier, more readable and clean way.

\n\n

As an example, let’s take two computed property macros and write our\nisValid on terms of them:

\n\n

Ember.computed.and
Ember.computed.notEmpty

\n\n

Computed Property With Macros in app/components/friends/edit-form.js

\n\n

export default Ember.Controller.extend({\n  hasEmail:     Ember.computed.notEmpty('model.email'),\n  hasFirstName: Ember.computed.notEmpty('model.firstName'),\n  hasLastName:  Ember.computed.notEmpty('model.lastName'),\n  hasTwitter:   Ember.computed.notEmpty('model.twitter'),\n  isValid:      Ember.computed.and(\n    'hasEmail',\n    'hasFirstName',\n    'hasLastName',\n    'hasTwitter'\n  ),\n\n// actions omitted\n

\n\n\n\n

This is certainly much cleaner and less error-prone than original\nimplementation.

\n\n

We can see the full list of computed properties under the\nEmber.computed\nnamespace.

\n\n

Using components to mark a loan as returned.

\n\n

We previously lent our favorite bike to one of our friends and they\njust returned it. We need to mark the item as returned.

\n\n

We’ll add a select in the loans index, so we can mark an item as\nreturned or borrowed. Whenever that loan has pending changes, we’ll\nsee a save button.

\n\n

Using components we’ll encapsulate the behavior per row into its own\nclass, removing responsibility from the model and delegating it to a\nclass. This class will handle how every row should look and\nadditionally when it should fire a save depending on the state of\nevery loan.

\n\n

We’ll create an loans/loan-row component which will wrap\nevery element. We’ll pass the necessary data to render the list of\npossible states and also the loan.

\n\n

Let’s create the loans/loans-row using the components\ngenerator.

\n\n

Creating an component

\n\n

ember g component loans/loan-row\n

\n\n\n\n

Let’s modify the component so it looks as follows:

\n\n

app/components/loans/loan-row.js

\n\n

import  Ember from 'ember';\n\nexport default Ember.Component.extend({\n  tagName: 'tr',\n  loan: null // passed-in\n});\n

\n\n\n\n

We are specifying that the html tag for this component is going to be a\ntr meaning that whatever content we put in the template, it will be\nwrapped in table row using the HTML tag tr, by default it is a\ndiv. Also we defined two properties loan and loanStates\nwith value null and the comment: “passed-in”. It will help people\nconsuming the component to identify which data they should pass-in.

\n\n

We need to add the the markup for the component as follows:

\n\n

app/templates/components/loans/loan-row.hbs

\n\n

<td>{{loan.article.name}}</td>\n<td>{{loan.notes}}</td>\n<td>{{loan.createdAt}}</td>\n<td>\n  {{input type=\"checkbox\" checked=loan.returned}}\n</td>\n<td>\n  {{#if loan.isSaving}}\n    <p>Saving ...</p>\n  {{else if loan.hasDirtyAttributes}}\n    <button {{action save loan}}>Save</button>\n  {{/if}}\n</td>\n

\n\n\n\n

In the template we are defining the cells for every loan row and\nreading the value from the “passed-in” property loan, also we are\ncalling the action save, which we are passing in.

\n\n

We are also using the properties loan.isSaving and\nloan.hasDirtyAttributes, which belong to the loan we\npassed-in.

\n\n

The previous properties are part of\nDS.Model and they\nhelp us to know things about a model. In the previous scenario,\nloan.hasDirtyAttributes becomes true if there is a change to the model and\nloan.isSaving is true if the model tries to persist any changes to\nthe backend.

\n\n

Before using our components, let’s create the loans.index controller\nand add a function called save which we’ll use to save changes in a\nloan.

\n\n

Let’s add the following content after running ember g controller loans/index:

\n\n

app/controllers/loans/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  save(loan) {\n    return loan.save();\n  }\n});\n

\n\n\n\n

Now let’s use our component in the loans index template:

\n\n

app/templates/loans/index.hbs

\n\n

<table>\n  <thead>\n    <tr>\n      <th>Article</th>\n      <th>Notes</th>\n      <th>Borrowed since</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    {{#each model as |loan|}}\n      {{loans/loan-row\n        loan=loan\n        save=(action save)\n      }}\n    {{/each}}\n  </tbody>\n</table>\n

\n\n\n\n

We are iterating over every loan in the model and then rendering an\nloans-row component for each of them, we are passing as attributes the\nloan, binding the save action to another action which is also called\nsave.

\n\n\n\n

If we open the ember-inspector, open the view tree and then select\ncomponents, we will notice that every component is displayed\nindependently.

\n\n\n\n

If we go to the browser and try what we just created, everything should\nwork.

\n\n

Implementing auto save.

\n\n

Instead of clicking the save button every time we change the\nstate of the model, we want it to save automatically.

\n\n

We’ll rewrite our template so the save button is not included and then\nuse the input helper action to call save.

\n\n

app/templates/components/loans/loan-row.hbs

\n\n

<td>{{loan.article.name}}</td>\n<td>{{loan.notes}}</td>\n<td>{{loan.createdAt}}</td>\n<td>\n  {{input type=\"checkbox\" checked=loan.returned click=(action save loan)}}\n</td>\n<td>\n  {{#if loan.isSaving}}\n    <p>Saving ...</p>\n  {{/if}}\n</td>\n

\n\n\n\n

We are doing something new here, we are passing the argument to the\naction in the action itself like action save loan, this is one of\nthe cool things we can do with closure actions.

\n\n

Now, every time we change the state of the loan, the save\naction will be called.

\n\n

Route hooks

\n\n

If we go to\nhttp://localhost:4200/friends/new\nand click cancel without entering anything, or we write something and\nthen click cancel, we’ll still see the unsaved record in our friends\nindex. It only goes away if we refresh the app.

\n\n\n

\n\n\n

The same happens with an article. If we try to create one but we click\ncancel, it will appear in the index anyway.

\n\n

The ember data store not only keeps all the data we load from the\nserver, but it also keeps the one we create on the client. We were\nactually pushing a new record to the store when we did the following\non the friends new route:

\n\n

  model() {\n    return this.store.createRecord('friend');\n  },\n

\n\n\n\n

Such records will live in the store with the state new. We can\ncall save on it, which will persist it to the backend and make it\nmove to a different state, or we can remove it and our backend will\nnever know about it.

\n\n

We might ask ourselves: but aren’t we doing a store.findAll on the\nfriends index route, which loads our data again from the server? And\nshouldn’t that remove the unsaved records?

\n\n

That’s partially true. It is correct that when we do this.store.findAll(‘friend’),\na GET request is made to the server. When we load our existing\nrecords again, instead of throwing out all the records in the\nstore, ember data merges the results, updating existing records\nand leaving untouched the ones that the server doesn’t know about.\nThat’s why we see the new but unsaved record in the index.

\n\n

To mitigate this situation, if we are leaving the friends new\nroute and the model was not saved, we need to remove the record from\nthe store. How do we do that?

\n\n

Ember.Route has a\nset of hooks that are called at different times during the route\nlifetime. For instance, we can use\nactivate\nto do something when we enter a route,\ndeactivate\nwhen we leave it or\nresetController\nto reset values on some actions.

\n\n

Let’s try them in app/routes/friends/new.js:

\n\n

Using Route Hooks in app/routes/friends/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.store.createRecord('friend');\n  },\n  activate() {\n    console.log('----- activate hook called -----');\n  },\n  deactivate() {\n    console.log('----- deactivate hook called -----');\n  },\n  resetController: function (controller, isExiting, transition) {\n    if (isExiting) {\n      console.log('----- resetController hook called -----');\n    }\n  }\n});\n

\n\n\n\n

And then visit\nhttp://localhost:4200/friends/new\nand click cancel or friends.

\n\n

We should see something like the following in our browser’s console:

\n\n\n

\"Activate — Activate and Deactivate hooks

\n\n\n

Coming back to our original problem of the unsaved record in the\nstore, we can use the resetController hook to clean up our state.

\n\n

Let’s rewrite app/routes/friends/new.js so the resetController hook does what we expect:

\n\n

Cleaning up the store on resetController in app/routes/friends/new.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    return this.store.createRecord('friend');\n  },\n  resetController(controller, isExiting) {\n    if (isExiting) {\n      // We grab the model from the controller\n      //\n      var model = controller.get('model');\n\n      // Because we are leaving the Route we verify if the model is in\n      // 'isNew' state, which means it wasn't saved to the backend.\n      //\n      if (model.get('isNew')) {\n\n        // We call DS#destroyRecord() which removes it from the store\n        //\n        model.destroyRecord();\n      }\n    }\n  }\n});\n

\n\n\n\n

Another scenario where it is common to use the resetController hook\ninvolves the edit routes. For example, if we try to edit a friend\nand don’t save the changes but click cancel, the friend profile will\nshow whatever change we leave unsaved. To solve this problem we’ll use\nthe resetController hook, but instead of checking if the model\nisNew, we’ll call model.rollback(). This will return the\nattributes to their initial state if the model hasDirtyAttributes.

\n\n

Using resetController hook app/routes/friends/edit.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  resetController(controller, isExiting) {\n    if (isExiting) {\n      var model = controller.get('model');\n      model.rollback();\n    }\n  }\n});\n

\n\n\n\n\n\n\n

Working with JavaScript plugins

\n\n

In this chapter we’ll learn how to write Ember helpers that can be\nconsumed in our templates. To do so, we’ll write a helper called\nformat-date that will show the date when an\narticle was borrowed. Instead of showing Sun Sep 28 2014 04:58:30\nGMT-0500, we’ll see September 28, 2014.

\n\n

We’ll implement format-date using\nMomentjs, a library that facilitates working\nwith dates in JavaScript.

\n\n

Installing moment

\n\n

Remember that ember-cli uses Bower to manage frontend dependencies.\nHere we’ll use the same pattern used to install picnicss: we’ll\nadd moment to Bower and then use app.import in our\nember-cli-build.js.

\n\n\n\n

First, we install moment:

\n\n

$ bower install moment --save\n

\n\n\n\n

The option --save adds the dependency to our bower.json. We\nshould find something similar to “moment”: “~2.13.0” (the version\nmight be different).

\n\n

Next, let’s import moment. To find out which file to import, let’s go\nto bower_components/moment/. We’ll see that it contains a\nmoment.js file that is the non-minified version of the library.\nWe can also point to any of the versions under the directory min/. For\nnow, let’s use the non-minified.

\n\n\n\n

Let’s add the following to our ember-cli-build.js:

\n\n

app.import('bower_components/moment/moment.js');\n

\n\n\n\n

Next, if we navigate to\nhttp://localhost:4200, open the console, and\ntype “moment” we should have access to the moment object.

\n\n

We have successfully included our first JavaScript plugin,\nbut we need to be aware of some gotchas.

\n\n

It’s a global!

\n\n

At the beginning of the book, we mentioned that one of the things\nember-cli gives you is support to work with ES6 Modules rather than\nglobals. It feels like taking a step backward if we add a library\nand then use it through its global, right?

\n\n

The sad news is that not all libraries are written in such a way that\nthey can be consumed easily via a modules loader. Even so, if there is\nan AMD definition included in the library, not all of them are\ncompatible with the module loader used by ember-cli.

\n\n

For example, moment includes an AMD version:

\n\n

moment AMD definition

\n\n

// ...\n} else if (typeof define === 'function' && define.amd) {\n    define('moment', function (require, exports, module) {\n        if (module.config && module.config() && module.config().noGlobal === tru\\\ne) {\n            // release the global variable\n            globalScope.moment = oldGlobalMoment;\n        }\n\n        return moment;\n    });\n

\n\n\n\n

Unfortunately, the module loader ember-cli is using doesn’t support\nthat yet.

\n\n

Other libraries do the following:

\n\n

Anonymous module

\n\n

define([], function() {\n\treturn lib;\n});\n

\n\n\n\n

This is known as an anonymous module. Although its syntax is\nvalid, the loader doesn’t support this either because it expects named\nmodules.

\n\n\n\n

This issue is not entirely the fault of ember-cli, but in fact results\nfrom everyone building their libraries in different formats, making it\ndifficult for consumers to use.

\n\n

What can we do about it?

\n\n

Wrapping globals

\n\n

Instead of consuming globals directly, let’s wrap them in a helper\nmodule that will allow us to foster the use of modules and to easily\nupdate or replace moment once we have a way to load it via the\nmodule loader.

\n\n

First, let’s create a utils file called date-helpers:

\n\n

\n \n\n

$ ember g util date-helpers\ninstalling\n  create app/utils/date-helpers.js\ninstalling\n  create tests/unit/utils/date-helpers-test.js\n

\n\n\n\n

Replace app/utils/date-helpers.js with the following:

\n\n

Wrapping globals: app/utils/date-helpers.js

\n\n

function formatDate(date, format) {\n  return window.moment(date).format(format);\n}\n\nexport {\n  formatDate\n};\n

\n\n\n\n

Here we are wrapping the call to moment#format in the function\nformatDate, which we can consume doing import { formatDate } from\n‘utils/date-helpers’;. With this, we are back to our idea of using\nmodules. We’ll also have the facility to easily update moment\nwhen our loader is ready to load it.

\n\n

If we decide to stop using moment and replace it with any\nother similar library, we won’t need to change our\nconsuming code since it doesn’t care how format-date is\nimplemented.

\n\n

Writing an Ember helper: format-date.

\n\n

Helpers are pieces of code that help us augment our templates. In this\ncase, we want to write a helper to create a date as a formatted string.

\n\n

ember-cli includes a generator for helpers. Let’s create\nformat-date with the command ember g helper format-date, and\nthen modify app/helpers/format-date.js so it consumes our format\nfunction.

\n\n

Format date helper app/helpers/format-date.js

\n\n

import Ember from 'ember';\n\n// We are consuming the function defined in our utils/date-helpers.\nimport { formatDate  } from '../utils/date-helpers';\n\nexport default Ember.Helper.helper(function([date, format]) {\n  return formatDate(date, format);\n});\n

\n\n\n\n

Once we have our helper defined, we can use it in the component\napp/templates/components/loans/loan-row.hbs:

\n\n

Using format-date in app/components/loans/loan-row.hbs

\n\n

<td>{{loan.article.name}}</td>\n<td>{{loan.notes}}</td>\n<td>{{format-date loan.createdAt \"LL\"}}</td>\n<td>\n  {{input type=\"checkbox\" checked=loan.returned click=(action save loan)}}\n</td>\n<td>\n  {{#if loan.isSaving}}\n    <p>Saving...</p>\n  {{/if}}\n</td>\n

\n\n\n\n

Now, when we visit any of our friends’ profiles, we should see the dates\nin a more attractive format.

\n\n

Working with libraries with named AMD distributions.

\n\n

Before the addons system existed, the easiest way to distribute\nJavaScript libraries to be consumed in ember-cli was to have a build\nwith a named AMD version, importing the library using app.import,\nand whitelisting the library’s exports.

\n\n

Let’s study\nic-ajax, an\n“Ember-friendly jQuery.ajax wrapper.” If we navigate to the\nlib/main.js,\nwe’ll notice that the source of the application is written with\nES6 syntax, but it is\ndistributed\nin different formats. This allows us to consume it in either global or\nmodule formats.

\n\n

As mentioned previously, loader.js doesn’t work with anonymous AMD\ndistributions. If we want to include ic-ajax, we need to use the\nnamed AMD output. Let’s try ic-ajax in our project for a first\nsketch of the dashboard.

\n\n

Let’s add the library to bower with bower\ninstall ic-ajax --save. If we are asked to select a version of ember,\nthen we need to select the one which is higher. Once it’s installed,\nlet’s import it into our ember-cli-build.js as follows:

\n\n

Importing ic-ajax

\n\n

app.import('bower_components/ic-ajax/dist/named-amd/main.js');\n

\n\n\n\n

ic-ajax’s default export is the request function, which allows us\nto make petitions and manage them as if they were promises. Let’s use\nthis to create a “dashboard” object.

\n\n

We’ll present dashboard as the home page of our application, so when\nwe navigate to the root url we’ll see the reports. We already have the\ntemplate, but let’s create the route to load the required data. Create\napp/routes/index.js with the following content:

\n\n

app/routes/index.js

\n\n

import Ember from 'ember';\nimport request from 'ic-ajax';\n\nexport default Ember.Route.extend({\n  model()  {\n    return request('/friends').then(function(data){\n      return {\n        friendsCount: data.data.length\n      };\n    });\n  }\n});\n

\n\n\n\n

And then replace app/templates/index.hbs so it uses\nfriendsCount:

\n\n

\n \n\n

<h1>Dashboard</h1>\n<hr/>\n<h2>Total Friends: {{model.friendsCount}}</h2>\n

\n\n\n\n

Next, if we run ember server, we’ll see that everything works. We\ncan see the friends count in our dashboard by visiting\nhttp://localhost:4200/.

\n\n

ember-ajax

\n\n

We installed ic-ajax only for demonstration purposes but this library\nis not longer the recommended way to wrap ajax request in our ember\napplications. Instead, there is now a library called\nember-ajax which is the one\nofficially supported by the community.

\n\n

The library ember-ajax is consumed a bit differently than ic-ajax\nsince it requires us to use a service.

\n\n

Now that we understand how importing named AMD libraries works, we can\nremove the import for ic-ajax from the ember-cli-build.js and use ember-ajax. Let’s run the following commands and then stop and\nstart the server.

\n\n

\n \n\n

$ bower uninstall ic-ajax --save\n$ ember install ember-ajax\n

\n\n\n\n

If we navigate to the dashboard, we’ll see an error like Uncaught\nError: Could not find module ic-ajax imported from\nborrowers/routes/index. We need to change the route to consume\nember-ajax` instead, it should look like the following:

\n\n

app/routes/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  //\n  // Check the following for more information about services\n  // https://guides.emberjs.com/v2.5.0/applications/services/\n  //\n  ajax: Ember.inject.service(),\n  model()  {\n    return this.get('ajax').request('/friends').then(function(data){\n      return {\n        friendsCount: data.data.length\n      };\n    });\n  }\n});\n

\n\n\n\n

After changing the route with the code above, our application should\nwork fine again.

\n\n

A temporary replacement for moment.js

\n\n

Let’s consume a simple named AMD library that takes a date and returns\nits value after calling .toDateString(). This will be a simple\nexample just to practice another module for importing named AMD.

\n\n

The name of the library is borrowers-dates and it is located in https://github.com/abuiles/borrowers-dates.

\n\n

The following is the content of the library:

\n\n

borrowers-dates library

\n\n

define(\"borrowers-dates\", [\"exports\"], function(__exports__) {\n  \"use strict\";\n  function format(date) {\n    return date.toDateString();\n  }\n\n  __exports__.format = format;\n});\n

\n\n\n\n

The library exports a function called format. Let’s consume it via\nbower:

\n\n

\n \n\n

bower install borrowers-dates --save\n

\n\n\n\n

And then import it through our ember-cli-build.js:

\n\n

Consuming borrowers-dates

\n\n

app.import('bower_components/borrowers-dates/index.js');\n

\n\n\n\n

With the library included, let’s consume it in\napp/utils/date-helpers.js instead of moment:

\n\n

Using borrowers-dates in app/utils/date-helpers.js

\n\n

import { format as borrowersDate } from 'borrowers-dates';\n\n\nfunction formatDate(date, format) {\n  return borrowersDate(date, format);\n}\n\nexport {\n  formatDate\n};\n

\n\n\n\n

Now when we visit the profile for any our friends with articles, we’ll\nsee the dates rendered differently. This is because we are no longer\nusing moment.

\n\n\n\n

ember-browserify

\n\n

Browserify is a Node library which allows us\nto consume other Node libraries in the Browser using CommonJS (which\nis Node’s module system), what this means is that we can install\nlibraries like MomentJS using npm and then consume them in the browser\nvia browserify. But wait, to use Browserify we actually need to\ninstall the library and create a “bundle” with our\ndependencies, normally we’ll run something like browserify main.js -o\nbundle.js and then use bundle.js via a script tag <script\nsrc=\"bundle.js\"></script>.

\n\n

As we can imagine this can get tricky and hard to manage in our\nember-cli application, but thanks to\nEdward Faulkner there is addon which allow\nus to consume libraries from npm with browserify without needing us to\nworry about the bundling process, it is called ember-browserify.

\n\n

Using ember-browserify

\n\n

First we need to install the addon, which we can do running ember\ninstall:

\n\n

\n \n\n

$ ember install ember-browserify\n

\n\n\n\n

Once the addon has been installed, we are going to use it to consume\nMomentJS from npm in our date-helpers file.

\n\n

Before doing that, let’s remove moment with bower uninstall moment\n--save and also remove\napp.import('bower_components/moment/moment.js'); from\nember-cli-build.js.

\n\n

Next, let’s install moment via npm, which we can do with npm install\nmoment --save-dev.

\n\n

Once it has been installed we can consume it from npm thanks to\nember-browserify just doing import moment from 'npm:moment';.

\n\n

Let’s use it in our date-helpers so formatDate uses moment.

\n\n

app/utils/date-helpers.js

\n\n

import moment from 'npm:moment';\n\nfunction formatDate(date, format) {\n  return moment(date).format(format);\n}\n\nexport {\n  formatDate\n};\n

\n\n\n\n

And that’s it, we are now consuming MomentJS via browserify just as if\nit was other module in our application.

\n\n

Wrapping up

\n\n

In this chapter we have covered how to work with JavaScript plugins\nboth as globals, consuming named AMD plugins and via ember-browserify.

\n\n

We didn’t cover how to write reusable plugins to be consumed with\nember-cli. This is what addons are used for, and we’ll talk\nabout them in the next chapter.

\n\n\n\n\n

Components and Addons

\n\n

Web Components

\n\n

Web Components are a new mechanism that allows us to extend the DOM\nwith our own elements rather than limit ourselves to traditional\ntags. We can define our own tags, wrapping up all the display logic in a\nsingle bundle, and reuse it between different applications. We’ll\nuse the component as any other tag and the browser will\nunderstand how to render it based on its definition.

\n\n

Let’s examine how a Share on Twitter button works. Currently, we need\nto include some JavaScript and then create an anchor tag that\nwill be transformed by the JavaScript snippet:

\n\n

Twitter Share Button

\n\n

<a class=\"twitter-share-button\"\n  href=\"https://twitter.com/share\">\nTweet\n</a>\n<script type=\"text/javascript\">\nwindow.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.ge\\\ntElementById(id)){return}js=d.createElement(s);js.id=id;js.src=\"https://platform\\\n.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);return window.twttr\\\n||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,\"script\",\"twitter-wjs\"))\\\n;\n</script>\n

\n\n\n\n

The previous code will be the same regardless of the\napplication we are developing. Sounds like a good candidate for a\ncomponent since it’s a chunk of code that can be reused across\napplications. A possible twitter-button component could look something\nlike the following:

\n\n

Twitter Share Button

\n\n

<twitter-button>\n  Ember.js Rocks!\n</twitter-button>\n

\n\n\n\n

All the implementation details are hidden in its definition.\nAs consumers, we are only interested in the final product and we needn’t worry about how it is accomplished.

\n\n

Web Components are a great tool that we can use to write more\nexpressive applications and to avoid code repetition within projects.\nUnfortunately, it is not yet supported in all browsers.

\n\n

To tackle this problem, ember introduced the concept of Components.\nThis is an API that allows us to write components today by\nfollowing the W3C specification as closely as possible. The day components become widely available, we’ll be\nable to switch without hiccups.

\n\n\n\n

ember-cli addons

\n\n

ember-cli has a built-in mechanism that allows us to augment ember-cli’s\nfunctionality and share code easily between different applications.\nThis mechanism is known as addons.

\n\n

Using addons, we can easily write ember components and share them with\nothers using npm. Let’s create our first component, which will help us\ngrab an image to use as placeholder in our friends’ profiles.

\n\n

ember-cli-fill-murray

\n\n

http://www.fillmurray.com is a service we can use to get random images\nof Bill Murray to use as placeholders. Let’s write an addon so that we\ncan do something like the following in any of our templates:

\n\n

Fill Murray Component

\n\n

{{fill-murray width=300 height=300}}\n

\n\n\n\n

First we need to create the addon. ember-cli has a command for this. Outside of our borrowers directory, let’s run the following:

\n\n

Creating an ember-cli addon

\n\n

$ ember addon ember-cli-fill-murray\ninstalling addon\n  create .bowerrc\n  create .editorconfig\n  create .ember-cli\n  create .jshintrc\n  create .travis.yml\n

\n\n\n\n

The addon command creates a directory very similar to the one\ncreated by new, but the former is done in a way that allows it to be\ndistributed as an addon.

\n\n

If we go to the directory ember-cli-fill-murray, it will look like\n the following:

\n\n

Addon directory

\n\n

.\n|-- LICENSE.md\n|-- README.md\n|-- addon\n|-- app\n|-- bower.json\n|-- bower_components\n|-- config\n|-- ember-cli-build.js\n|-- index.js\n|-- node_modules\n|-- package.json\n|-- testem.json\n|-- tests\n+-- vendor\n

\n\n\n\n

If we open package.json, we’ll see the following section:

\n\n

\n \n\n

  \"keywords\": [\n    \"ember-addon\"\n  ],\n

\n\n\n\n

That’s how ember-cli detects the presence of an addon. When we\ninclude the library in an ember-cli project, it will transverse\nthe dependencies and identify as addons the items with the\nkeyword ember-addon. We’ll also use package.json to specify\nany dependency our library might have.

\n\n

Next we have index.js, which is the entry point for loading our\naddon. If we need to add any extra configuration for our addon,\nwe’ll specify it in this file. For now let’s work with the basic one, which looks like this:

\n\n

\n \n\n

module.exports = {\n  name: 'ember-cli-fill-murray'\n};\n

\n\n\n\n

Next we have the directories app and addon. This is where\nthe code for our addon will live.

\n\n

Whatever we put into app will be merged into our application’s\nnamespace, meaning we’ll consume it just as if it were inside our\nember-cli project.

\n\n

For example, if we had an app/model/friend-base.js file in our\naddon, we could consume it in any of the models in our\nborrowers app thusly:

\n\n

Consuming an addon’s app/model/friend-base.js

\n\n

import FriendBase from './friend-base';\n\n...\n

\n\n\n\n

If we had put friend-base.js into the addon directory, instead\nof getting merged into the consuming application namespace, it would be\nkept under the addon namespace with the previous example. If our\naddon was called borrowers-base and we had\naddon/models/friend-base.js, then we would have consumed it like\nthis:

\n\n

Consuming modules from addon’s namespace

\n\n

import FriendBase from 'borrowers-base/models/friend-base';\n\n...\n

\n\n\n\n

Going back to our ember-cli-fill-murray addon, we have the directory in\nplace and we want to distribute a component called fill-murray.\nInside the directory, we can also use ember-cli generators.\nWe’ll do that in order to create the component:

\n\n

Bill Murray Component

\n\n

$ ember generate component fill-murray\ninstalling component\n  create addon/components/fill-murray.js\n  create addon/templates/components/fill-murray.hbs\ninstalling component-test\n  create tests/integration/components/fill-murray-test.js\ninstalling component-addon\n  create app/components/fill-murray.js\n

\n\n\n\n

In addon/components/fill-murray.js, we can specify the properties for\nour component:

\n\n

addon/components/fill-murray.js

\n\n

import Ember from 'ember';\nimport layout from '../templates/components/fill-murray';\n\nexport default Ember.Component.extend({\n  layout: layout,\n  height: 100, // Default height and width 100\n  width: 100,\n\n  //\n  // The following computed property will give us the url for\n  // fill-murray. In this case it depends on the properties height and\n  // width.\n  //\n  src: Ember.computed('height', 'width', {\n    get() {\n      let base = 'http://www.fillmurray.com/';\n      let url  = `${base}${this.get('width')}/${this.get('height')}`;\n\n      return url;\n    }\n  })\n});\n

\n\n\n\n

Next we need to specify the body of our component in\naddon/templates/components/fill-murray.hbs:

\n\n

<img src={{src}}>\n

\n\n\n\n

When rendering the component, it inserts an img tag that reads the\nsource from the computed property we specified.

\n\n

Our addon is now ready. The next step is to distribute it\nvia npm. First let’s change the name in package.json\nbecause ember-cli-fill-murray is already taken.\nWe’ll use ember-cli-fill-murray-your-github-nickname and set\nversion to 0.1.0. It will look something like this:

\n\n

  \"name\": \"ember-cli-fill-murray-your-github-nickname\",\n  \"version\": \"0.1.0\",\n

\n\n\n\n

Since our addon ships with templates, we need to include\nember-cli-htmlbars in the dependencies, which we can do running npm\ni ember-cli-htmlbars --save.

\n\n

With the previous in place, let’s do npm publish. Our addon\nis now ready to be consumed.

\n\n

Consuming fill-murray in borrowers

\n\n

Once our package is in npm, we can add it to our application by\nrunning the following command:

\n\n

\n \n\n

$ ember install ember-cli-fill-murray-your-github-nickname\n

\n\n\n\n

Once it is installed, we can consume the component in any of our\ntemplates as follows:

\n\n

\n \n\n

{{fill-murray width=200 height=200}}\n

\n\n\n\n

Let’s modify our app/templates/friends/show.hbs to look like the\nfollowing:

\n\n

Consuming fill-murray in app/templates/friends/show.hbs

\n\n

<div class=\"clearfix flex p3 h2\">\n  <div class=\"\">\n    {{fill-murray width=200 height=200}}\n    <p class=\"\">{{model.fullName}}</p>\n    <p class=\"\">{{model.email}}</p>\n    <p class=\"\">{{model.twitter}}</p>\n    <p>{{link-to \"Lend article\" \"loans.new\"}}</p>\n    <p class=\"\">{{link-to \"Edit info\" \"friends.edit\" model}}</p>\n    <p class=\"\"><a href=\"#\" {{action \"delete\" model}}>Delete</a></p>\n  </div>\n  <div class=\"flex-auto ml1 loans-container\">\n    {{outlet}}\n  </div>\n</div>\n

\n\n\n\n

After editing the template, the Bill Murray placeholder will appear\nwhen we visit a friend’s profile.

\n\n

With that we have created and published our first addon.

\n\n\n

Ember Data

In this chapter we’ll cover some of the public methods from the\nDS.Store and\nlearn how to load relationships asynchronously.

\n\n

DS.Store Public API

\n\n

The store is the main interface we’ll use to interact with our records\nas well as the backend. When we create, load, or delete a record, it\nis managed and saved in the store. The store then takes care of\nreplicating any change to the backend.

\n\n

We won’t cover all of the functions, but we’ll go over the more common\nones and their gotchas.

\n\n

peekAll

\n\n

store.peekAll is similar to store.findAll, but instead of\nmaking a request to the backend it returns all the records already\nloaded in the store. The result of this method is a live array,\nwhich means it will update its content if more records are loaded into\nthe store for the given type.

\n\n

Let’s study this with the inspector by navigating to\nhttp://localhost:4200 and clicking refresh. Next we’ll grab an\ninstance of the application route and run the following commands in the\nconsole:

\n\n

friends = $E.store.peekAll('friend')\nfriends.get('length')\n> 0\nfriends.mapBy('firstName')\n> []\n

\n\n\n\n

We stored the result in a variable called friends, which is a\ncollection with zero elements. This makes sense because we haven’t\nloaded any friends yet. If we click on the friends link and run the\nfollowing:

\n\n

friends.get('length')\n> 3\nfriends.mapBy('firstName')\n> [\"zombo Wamba\", \"Pizza\", \"Loading-this\"]\n

\n\n\n\n

We’ll see that the result is no longer zero. When we navigated to the\nfriends route, a request to the backend was made and some records were\nloaded into the store. As we mentioned, the result from peekAll is\na live array. That’s why our friends variable was updated\nwithout requiring any additional steps.

\n\n\n\n

findAll

\n\n

If we call findAll with a model name, then it will make a request\nto load a list of records of that type. The following is an example:

\n\n

friends =  $E.store.findAll('friend')\n\nXHR finished loading: GET \"http://localhost:4200/api/v2/friends\".\n

\n\n\n\n

If we want to send query parameters with the request, then we should\nuse store.query, it receives the name of the model and an object\nas second argument, every key on the object will be included as\nparameter:

\n\n

friends =  $E.store.query('friend', {sort: 'first-name'})\n\nXHR finished loading: GET \"http://localhost:4200/api/v2/friends?&sort=first-name\\\n\".\n

\n\n\n\n

In the previous request we asked query to load all the articles,\nsending as parameters the key sort.

\n\n

Like peekAll and filter, the result from findAll is a\nlive array. When called, it makes a request to the server and the\ncollection is updated when more records are added to or removed from\nthe store.

\n\n

findRecord: Loading a single record

\n\n

If we want to load a single record then we should use\nstore.findRecord . To do that, we use the name of the model and\nthe record’s id as second argument:

\n\n

$E.store.findRecord('friend', 15)\nXHR finished loading: GET \"http://localhost:4200/api/v2/friends/15\".\n

\n\n\n\n

peekRecord

\n\n

We can use store.peekRecord(‘friend’, 15) to fetch a user directly\nfrom the store. Unlike findRecord, query or findAll, the behavior of\nthis function is synchronous. It will return the record if it is\navailable, or null otherwise.

\n\n

createRecord

\n\n

We are already familiar with createRecord, which is used when we\nwant to create a new record for a given type. For example:

\n\n

this.store.createRecord('friend', {attrs..});\n

\n\n\n\n

We can also use createRecord via a relationship. Suppose we are in\nthe context of a friend and we know they have an articles property\nthat represents all the articles belonging to another friend. If we want to\nadd a new article, we can do it using the following syntax:

\n\n

friend.get('articles').createRecord({attrs...});\n

\n\n\n\n

This won’t work if the relationship is async.

\n\n

Loading relationships

\n\n

We already covered how to create relationships between models. If we\nare defining a relationship of type “has many”, then we use the keyword\nhasMany. If we want a “belongs to”, we use DS.belongsTo.

\n\n

There are two ways to work with relationships. The first is working\nwith records pre-loaded into the store, and the second is to load them\non demand.

\n\n

As we know, our API follows JSON API, which gives us different\nstrategies to load the records associated with a relationship. In our\nAPI, we use the\nlinks strategy.\nEmber data follows those links to fill up the association\nautomatically.

\n\n

If we inspect the payload for friends, the results look something like\nthe following:

\n\n

\n \n\n

{\n  \"attributes\": {\n    \"created-at\": \"2016-06-12T13:47:02.427Z\",\n    \"email\": \"arya@got.com\",\n    \"first-name\": \"Arya\",\n    \"last-name\": \"Stark\",\n    \"twitter\": \"@noone\"\n  },\n  \"id\": \"64\",\n  \"links\": {\n    \"self\": \"http://api.ember-101.com/friends/64\"\n  },\n  \"relationships\": {\n    \"loans\": {\n      \"links\": {\n        \"related\": \"http://api.ember-101.com/friends/64/loans\",\n        \"self\": \"http://api.ember-101.com/friends/64/relationships/loans\"\n      }\n    }\n  },\n  \"type\": \"friends\"\n}\n

\n\n\n\n

This includes the model’s attributes and a key called relationships\nwhich includes the links where the related attributes can be fetched.

\n\n

Ember data then follows that link to get the list of loans for a\nfriend.

\n\n

We can see how this works if we visit http://localhost:4200/friends\nand then click on a friend, we’ll see that there are several requests\nafter that one to fetch the related loans and then more requests to\nfetch the related articles.

\n\n

We can avoid all those requests sideloading the related records,\nJSONAPI give us a way to do so, which is using the parameter include\nand then a path for the things we want to include.

\n\n

Let’s modify the index route so it includes the query parameter include with the value loans:

\n\n

app/routes/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    //\n    // We now use store.query and pass include in the options\n    //\n\n    return this.store.query('friend', {include: 'loans'});\n  }\n});\n

\n\n\n\n

Now if we go to to index, we’ll see that the request for the “loans”\nrelationship is not happening, but there are request for articles.

\n\n

We can sideload the articles too, but we need to ask for that in the\ninclude query params. Let’s modify our route once more so it looks\nlike the following:

\n\n

app/routes/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  model() {\n    //\n    // We now use store.query and pass include in the options\n    //\n\n    return this.store.query('friend', {include: 'loans,loans.article'});\n  }\n});\n

\n\n\n\n

If we go once more to friends and then click on one of them, we won’t\nsee extra requests happening.

\n\n

We can see the difference in the payload visiting the following page\nhttp://api.ember-101.com/friends?include=loans\nand then adding or removing things to the query param include.

\n\n

What to use?

\n\n

So many options. What should we use? It depends on our scenarios\nand how we want to load our data. Side-loading works perfectly when\nwe are not fetching many records, but it can make your API really\nslow if you are returning a lot of relationships and a lot of records.

\n\n

Async helps us alleviate the issue when we have a lot of records. This\ncan help us keep our end-points lighter, but it might add some\noverhead when getting all the ids in a relationship.

\n\n

The faster option from an API point of view would be to use links.\nThis won’t require the parent to know anything about its children,\nbut then we lose other benefits.

\n\n

For example, when using ids, ember data will only load records from\nthe server that are not yet available in the store. However, if some\nof the records are loaded, it won’t make that request. With links, you\nlose that benefit because ember data doesn’t have any information. It\nwill make the request and load data that you might already have\navailable.

\n\n

Again, it’s a matter of weighing risks and benefits and finding what\nworks best for us. We need to measure and experiment with different\nstrategies before choosing the one that gives us the best performance.

\n\n\n

Computed Properties and Observers

\n\n

We already covered computed properties, which we use in different parts\nof our applications. One of these uses occurs on the friend model:

\n\n

app/models/friend.js

\n\n

import DS from 'ember-data';\nimport Ember from 'ember';\n\nexport default DS.Model.extend({\n  // ...\n  fullName: Ember.computed('firstName', 'lastName', {\n    get() {\n      return this.get('firstName') + ' ' + this.get('lastName');\n    }\n  })\n});\n

\n\n\n\n

With the code above, we created a new property on the model called\nfullName that depends on firstName and lastName. The\ncomputed properties are called once at the beginning and the result is\ncached until any of the dependent properties change.

\n\n

Next we’ll talk about a couple of features and things to keep\nin mind when defining computed properties.

\n\n

Computed Property function signature

\n\n

The functions we’ve used to declare a computed property have looked\nlike the following:

\n\n

Computed Property Function

\n\n

fullName: Ember.computed('firstName', 'lastName', {\n  get() {\n    return this.get('firstName') + ' ' + this.get('lastName');\n  }\n})\n

\n\n\n\n

We can also add support for setting the value of a computed\nproperty and handling how it should behave. The following example\nshows how:

\n\n

Computed Property with set support

\n\n

fullName: Ember.computed('firstName', 'lastName', {\n  get() {\n    return this.get('firstName') + ' ' + this.get('lastName')\n  },\n\n  set(key, value) {\n    var name = value.split(' ');\n\n    this.set('firstName', name[0]);\n    this.set('lastName', name[1]);\n\n    return value;\n  }\n})\n

\n\n\n\n\n\n

Why didn’t we mention that we can use a computed property as setter?\nThis is a very uncommon scenario that tends to cause a lot of\nconfusion for people. Ideally, we use computed properties as\nRead-Only.

\n\n

Computed Properties gotchas

\n\n

Computed properties and observers are normally fired whenever we call\nthis.set() on the property they depend on. The downside of this is that they\nwill be recalculated even if the value is the same.

\n\n

Fortunately for us, Gavin Joyce\nwrote an ember-cli-addon called\nember-computed-change-gate\nthat offers an alternative function to define computed properties\nand that fixes observers such that they are only called if the property\nthey depend on has changed.

\n\n

We can install the addon with npm i ember-computed-change-gate\n--save-dev and use it in our friends model like so:

\n\n

Using ember-computed-change-gate in app/models/friend.js

\n\n

import DS from 'ember-data';\nimport Ember from 'ember';\nimport changeGate from 'ember-computed-change-gate/change-gate';\n\nexport default DS.Model.extend({\n  //\n  // Currently changeGate only supports one property\n  //\n  capitalizedFirstName: changeGate('firstName', function(firstName) {\n    return Ember.String.capitalize(firstName);\n  })\n});\n

\n\n\n\n

Now our computed property capitalizedFirstName will be called\nonly when the value of the dependent key has changed to a\ndifferent value.

\n\n

Observers

\n\n

Ember has a built-in implementation of the\nObserver pattern,\nwhich allows us to keep track of changes in any property or\ncomputed property.

\n\n

Let’s use an observer on the low-row component to do something\nevery time the state changes, let’s add the following:

\n\n

app/components/loans/loan-row.js

\n\n

  stateChanged: Ember.observer('loan.returned', function() {\n    var loan = this.get('loan');\n    console.log('OMG Expensive operation because loan state changed');\n  }),\n

\n\n\n\n

We define an observer calling Ember.observer which receives any\nnumber of properties to observe and the function to call when any of\nthe properties change.

\n\n\n\n

We can also create an observer using addObserver from\nEmber.Observable.\nWe could define the stateChanged observer like this:

\n\n

import Ember from 'ember';\n\nexport default Ember.Component.extend({\n  tagName: 'tr',\n  loan: null, // passed-in\n  init() {\n    this._super(...arguments);\n    this.addObserver('loan.returned', this, this.stateChanged);\n  },\n  stateChanged() {\n    console.log('OMG Expensive operation because loan state changed');\n  }\n});\n

\n\n\n\n

Here we are using init which is the first function called when the\ncomponent is started, and then we call _super() to call the\nfunction on the object’s parent. Calling super is not always required\nbut if you are using mixins or inheriting from a class that does\nsomething on init then we need to call it.

\n\n

The ember guides have a great section on the component life cycle, we\nrecommend to give that section a read to expand the knowledge in this\narea https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/

\n\n

Observing collections

\n\n

Ember adds two convenient properties to collections. We can use\nthem if we want to observe changes to any of the members’ properties,\nor if we want to do something every time an element is\nadded or removed.

\n\n

The first property is\n.[],\nwhich is just a special handler that changes every time the\ncollection content changes.

\n\n

The second one is\n@each,\nwhich allows us to observe properties on each of the items in the\ncollection.

\n\n

We can use the previous function in our loans index to call a function\nwhen we add a new loan, and then the other one when we change the state\nof a loan:

\n\n

app/controllers/loans/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  save(loan) {\n    return loan.save();\n  },\n  contentDidChange: Ember.observer('model.[]', function() {\n    console.log('Called when we add or removed a loan.');\n  }),\n  stateDidChange: Ember.observer('model.@each.returned', function() {\n    console.log('Called when the state property change for any of the loans.');\n  })\n});\n

\n\n\n\n

If we visit any of our friends’ profiles and change the state for any\nloan or add a new one, we’ll see the relevant messages in the\nbrowser’s console.

\n\n\n

Driving our application state through the URL

\n\n

In JSConf EU 2013, Tom Dale gave a talk\ncalled\nStop Breaking the Web.

\n\n

Tom talks about the importance of the URL and how we should give it a\nhigher priority in our applications. Ideally, the URL should be able to\nreflect our application state in such a way that we can easily reference it, bookmark it, or share it with others.

\n\n

Some of us have probably experienced some frustration when\nvisiting a website that has search functionality but\nloses our selections between page reloads, or that doesn’t allow us to easily share\nwhat we see with others.

\n\n

Airline websites offer an example of this issue. The following image shows\nDelta’s website after searching for flights to the next EmberConf.

\n\n\n

The URL after the search is\nhttp://www.delta.com/air-shopping/findFlights.action, which doesn’t\nreally tell us anything about the screen we are visiting. If we copy\nand paste the URL in another browser, we’ll get a bunch of\nerrors and not the search we originally performed.

\n\n

Now let’s do a search on hipmunk. This website places greater\nvalue on the functionality of the URL.

\n\n\n

The search above results in the following:\nflights/MDE-to-PDX#!dates=Aug23,Aug31&pax=1.\nIsn’t that beautiful? Just by reading the URL, we know our destination\nand the dates of our trip. Clicking the URL takes us\nto the original search we see in the image. Suppose we want someone to\nbuy the ticket for us; we can simply share the URL and be done with it.

\n\n

Ember also appreciates the beauty of a functional URL. In fact, our\napplications are driven by URLs that we specify in app/router.js.\nThis doesn’t mean we are immune from building bad applications that don’t\nrespect the URL, but at least it gives us the tools to avoid these\nissues and invites us to think better about our URLs.

\n\n

Sorting friends.

\n\n

When visiting the friends index, we want to be able to sort them by\nclicking on the Name or Articles column and then toggle\nascending or descending between clicks.

\n\n

We’ll add 2 properties to our friends index controller: sortBy and\nsortAscending.

\n\n

To change our sort field dynamically, we will create a function\nsetSortBy that will receive as parameter the field we want to sort\nour properties by.

\n\n

We’ll also toggle the property sortAscending every time we call the\naction setSortBy. For example, if it’s true then it becomes\nfalse and vice versa.

\n\n

app/controllers/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  sortAscending: true,\n  //\n  // We'll use sortBy to hold the name of the field we want to sort by.\n  //\n  sortBy: 'first-name',\n  //\n  // The setSortBy function receives the name of the function and\n  // toggle `sortAscending`. The function `toggleProperty`  comes from the\n  // [Observable Mixin](http://emberjs.com/api/classes/Ember.Observable.html)\n  // it switches a boolean property between false and true.\n  //\n  setSortBy: function(fieldName) {\n    this.set('sortBy', fieldName);\n    this.toggleProperty('sortAscending');\n\n    console.log('Sorting by ', fieldName);\n    console.log('Sorting Asc?: ', this.get('sortAscending'));\n\n    return false;\n  },\n  actions: {\n    delete(friend) {\n      friend.destroyRecord();\n    }\n  }\n});\n

\n\n\n\n

Now we need to call the setSortBy action in the\napp/templates/friends/index.hbs

\n\n

app/templates/friends/index.hbs

\n\n

<table class=\"mt3 fit\">\n  <thead class=\"p1 h2\">\n    <tr class=\"white bg-blue\">\n      <th {{action setSortBy \"first-name\"}}> Name</th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody class=\"p1 h3\">\n    {{#each model as |friend|}}\n      <tr>\n        <td class=\"border-bottom\">\n          {{link-to friend.fullName \"loans\" friend}}\n        </td>\n        <td class=\"border-bottom\">\n          <a href=\"#\" {{action \"delete\" friend}}>Delete</a>\n        </td>\n      </tr>\n    {{/each}}\n  </tbody>\n</table>\n

\n\n\n\n

Let us add add some CSS so we have a cursor on the name column:

\n\n

app/styles/app.css

\n\n

[data-ember-action] {\n  cursor: pointer;\n}\n

\n\n\n\n

Now if we go to http://localhost:4200/friends and click on Name,\nwe’ll see that our action is being fired and something like the\nfollowing logged to the browser’s console:

\n\n

Sorting by  first-name\nSorting Asc?:  false\nSorting by  totalArticles\nSorting Asc?:  true\n

\n\n\n\n

But our list is not changing and we don’t see the URL changing either,\nwe need to refresh our model every time those values change and also\nthe URL. To achieve this we’ll use a useful feature called Query\nParameters that\nallows us to persist application state in the URL as parameters,\ngenerating URLs like /friends?sort=first-name.

\n\n

Query Parameters

\n\n

To use query parameters we need to specify a property called\nqueryParams in the controller associated with this route, and then\nlist every property that should persist as query parameter.

\n\n

In our scenario we’ll modify the controller as follows:

\n\n

app/controllers/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Controller.extend({\n  queryParams: ['sortBy', 'sortAscending'],\n  sortAscending: true,\n  sortBy: 'first-name',\n  // ...\n

\n\n\n\n

If we visit http://localhost:4200/friends the URL won’t have any\nquery parameters, but as soon as we click any of the headers the query\nparameters will change. Query parameters are only included when\nthe default value for the property changes. In our case, that would be\nwhen sortAscending changes to something different from true and\nsortBy to something different from first-name.

\n\n

Now we can refresh the browser or copy the URL into a new tab and\nwe’ll see the same query parameters, but the data is still not\nchanging, we’ll see how to fix that shortly.

\n\n

We can also use query params with the link-to helper. If we want\na link to the friends index sorted by first-name, we can write it\nlike this: {{#link-to 'friends' (query-params\nsortBy=\"first-name\")}}Friends{{/link-to}}

\n\n

Refreshing the model when query parameters changes

\n\n

By default the model hook won’t be called if any of the query\nparameters change, but there are scenarios where this can be the\ndesired behavior. For example, when we are using pagination, or if we\nwant to do server side sorting, under that scenario we’ll ask the API\nfor the users sorted by a given field in ascending or descending\norder.

\n\n

Let’s use the query parameters to change our friends order, since our\nJSONAPI supports sort, we can have the route make a\nfull transition when any of the queryParams change. To do this,\nwe’ll need to specify a property in the route called queryParams\nwhere we explicitly mark the parameters that we want to cause a full\ntransition.

\n\n

app/routes/friends/index.js

\n\n

import Ember from 'ember';\n\nexport default Ember.Route.extend({\n  queryParams: {\n    sortBy: {\n      refreshModel: true\n    },\n    sortAscending: {\n      refreshModel: true\n    }\n  },\n  model(params) {\n    //\n    // We use now store.query and pass include in the options\n    //\n\n    let query = { include: 'loans,loans.article' };\n\n    // We check if this value is passed\n    if (params.sortBy) {\n      query.sort = params.sortBy;\n\n      // If sortBy is passed we check if sortAscending is false,\n      // and use the JSONAPI syntax for descending sort\n      // http://jsonapi.org/format/#fetching-sorting\n      //\n      if (!params.sortAscending) {\n        query.sort = `-${query.sort}`;\n      }\n    }\n    return this.store.query('friend', query);\n  }\n});\n

\n\n\n\n

Now every time we change sortBy or sortAscending, the model hook\nfor app/routes/friends/index.js will be called, making a request\nto the API similar to the following and our friends list will be\nupdated accordingly:

\n\n

/friend?sort=first-name\n

\n\n\n\n

Testing Ember.js applications

\n\n

In this chapter we’ll cover the basics of unit and acceptance testing in\nEmber.js applications and recommend a couple of resources that can\nhelp us expand our knowledge in this area.

\n\n

Unit Testing

\n\n

When we run the generators, they create unit test files by default.\nWe can view all the generated unit tests if we go to tests/unit:

\n\n

Unit tests

\n\n

$ ls tests/unit/\nadapters\tcontrollers\tmodels\t\tutils\ncomponents\thelpers\t\troutes\n

\n\n\n\n

Tests are automatically grouped by type. If we open the unit test for our\nfriend model, we’ll see the following:

\n\n

tests/unit/models/friend-test.js

\n\n

import { test, moduleForModel } from 'ember-qunit';\n\nmoduleForModel('friend', 'Friend', { needs: ['model:article'] });\n\ntest('it exists', function(assert) {\n  var model = this.subject();\n  assert.ok(model);\n});\n

\n\n\n\n

At the beginning of the test we import a set of helpers from\nember-qunit, which is a\nlibrary that wraps a bunch of functions to facilitate testing with\nQUnit.

\n\n

moduleForModel received the name of the model we are testing, a\ndescription, and some options. In our scenario, we specify\nthat the tests need a model called article because of the existing\nrelationship between them.

\n\n

Next, the test includes a basic assertion that the model exists.\nthis.subject() would be an instance of a friend.

\n\n

We have two ways of running tests. The first one is via the browser while\nwe run the development server. We can navigate to\nhttp://localhost:4200/tests and our\ntests will be run. The second method is using a tests runner. At the\nmoment ember-cli has built-in support for Testem with\nPhantomJS, which we can use to run our tests on\na CI server. To run tests in this mode, we only need to do ember\ntest.

\n\n\n\n

Let’s write two more tests for our friend model. We want to check that\nthe computed property fullName behaves as expected and that the\nrelationship articles is properly set.

\n\n

tests/unit/models/friend-test.js

\n\n

import Ember from 'ember';\nimport { moduleForModel, test } from 'ember-qunit';\n\nmoduleForModel('friend', 'Unit | Model | friend', {\n  // Specify the other units that are required for this test.\n  needs: ['model:loan']\n});\n\ntest('it exists', function(assert) {\n  let model = this.subject();\n  // let store = this.store();\n  assert.ok(!!model);\n});\n\ntest('fullName joins first and last name', function(assert) {\n  var model = this.subject({firstName: 'Syd', lastName: 'Barrett'});\n\n  assert.equal(model.get('fullName'), 'Syd Barrett');\n\n  Ember.run(function() {\n    model.set('firstName', 'Geddy');\n  });\n\n  assert.equal(model.get('fullName'), 'Geddy Barrett', 'Updates fullName');\n});\n\ntest('loans relationship', function(assert) {\n  var klass  = this.subject({}).constructor;\n\n  var relationship = Ember.get(klass, 'relationshipsByName').get('loans');\n\n  assert.equal(relationship.key, 'loans');\n  assert.equal(relationship.kind, 'hasMany');\n});\n

\n\n\n\n

We can run our tests by going directly to the following URL:\nhttp://localhost:4200/tests?module=Friend.

\n\n

The first test verifies that fullName is calculated\ncorrectly. We have to wrap model.set('firstName', 'Geddy'); in\nEmber.run because it has an asynchronous behavior. If we modify the\nimplementation for fullName such that it doesn’t return first and last\nnames, the tests will fail.

\n\n

The second test checks that we have set up the proper\nrelationship to articles. Something similar could go in the articles\nmodel tests. If we call constructor on an instance to a model, that\nwill give us access to the class of which it is an instance.

\n\n

Let’s add other unit test for app/utils/date-helpers:

\n\n

tests/unit/utils/date-helpers-test.js

\n\n

import dateHelpers from 'borrowers/utils/date-helpers';\nimport { module, test } from 'qunit';\n\nmodule('Unit | Utility | date helpers');\n\ntest('formats a date object', function(assert) {\n  var date = new Date(\"11-3-2014\");\n  var result = dateHelpers.formatDate(date, 'ddd MMM DD YYYY');\n\n  assert.equal(result, 'Mon Nov 03 2014', 'returns a readable string');\n});\n

\n\n\n\n

We import the function we want to test and then check that\nit returns the date as a readable string. We can run the test by going to\nhttp://localhost:4200/tests?module=Unit%20%7C%20Utility%20%7C%20date%20helpers.

\n\n

Acceptance Tests

\n\n

With acceptance tests we can verify workflows in our application. For\nexample, making sure that we can add a new friend, that if we visit the\nfriend index a list is rendered, etc. An acceptance test basically emulates a\nreal user’s experience of our application.

\n\n

Ember has a set of helpers to simplify writing these kinds of\ntests. There are\nsynchronous\nand\nasynchronous\nhelpers. We use the former for tests that don’t have any kind of\nside-effect, such as checking if an element is present on a page, and the\nlatter for tests that fire some kind of side-effect. For example,\nclicking a link or saving a model.

\n\n

Let’s write an acceptance test to verify that we can add new friends\nto our application. We can generate an acceptance test with the\ngenerator acceptance-test.

\n\n

$ ember g acceptance-test friends/new\ninstalling\n  create tests/acceptance/friends/new-test.js\n

\n\n\n\n

If we visit the generated test, we’ll see the following:

\n\n

tests/acceptance/friends/new-test.js

\n\n

import { test } from 'qunit';\nimport moduleForAcceptance from 'borrowers/tests/helpers/module-for-acceptance';\n\nmoduleForAcceptance('Acceptance | friends/new');\n\ntest('visiting /friends/new', function(assert) {\n  visit('/friends/new');\n\n  andThen(function() {\n    assert.equal(currentURL(), '/friends/new');\n  });\n});\n

\n\n\n\n

Now we can run our tests by visiting\nhttp://localhost:4200/tests or, if we\nwant to run only the acceptance tests for Friends New,\nhttp://localhost:4200/tests?module=Acceptance%20%7C%20friends%2Fnew.

\n\n

Let’s add two more tests but this time starting from the index URL. We\nwant to validate that we can navigate to new and then check that it\nredirects to the correct place after creating a new user.

\n\n

Tests new friend: tests/acceptance/friends/new-test.js

\n\n

test('Creating a new friend', function(assert) {\n  visit('/');\n  click('a[href=\"/friends/new\"]');\n  andThen(function() {\n    assert.equal(currentPath(), 'friends.new');\n  });\n  fillIn('input[placeholder=\"First Name\"]', 'Johnny');\n  fillIn('input[placeholder=\"Last Name\"]', 'Cash');\n  fillIn('input[placeholder=\"email\"]', 'j@cash.com');\n  fillIn('input[placeholder=\"twitter\"]', 'jcash');\n  click('input[value=\"Save\"]');\n\n  //\n  // Clicking save will fire an async event.\n  // We can use andThen, which will be called once the promises above\n  // have been resolved.\n  //\n\n  andThen(function() {\n    assert.equal(\n      currentRouteName(),\n      'friends.show.index',\n      'Redirects to friends.show after create'\n    );\n  });\n\n});\n

\n\n\n\n

The second test we want to add checks that the application stays on\nthe new page if we click save, without adding any fields, and that an\nerror message is displayed:

\n\n

Tests new friend: tests/acceptance/friends/new-test.js

\n\n

test('Clicking save without filling fields', function(assert) {\n  visit('/friends/new');\n  click('input[value=\"Save\"]');\n  andThen(function() {\n    assert.equal(\n      currentRouteName(),\n      'friends.new',\n      'Stays on new page'\n    );\n    assert.equal(\n      find(\"h2:contains(You have to fill all the fields)\").length,\n      1,\n      \"Displays error message\"\n    );\n  });\n\n});\n

\n\n\n\n

Mocking the API response

\n\n

On the previous tests we hit the API, but this is not a common\nscenario. Normally we’d like to mock the interactions with the API.\nTo do so the community recommendation is to use\nember-cli-mirage, a library that\nallows us to mock servers with a simple DSL.

\n\n

Let’s stop the server and install mirage running ember install\nember-cli-mirage.

\n\n

Next, let’s disable mirage if the environment is development, since\nwe only want to use it for testing.

\n\n

config/environment.js

\n\n

if (environment === 'development') {\n  ENV['ember-cli-mirage'] = {\n    enabled: false\n  };\n}\n

\n\n\n\n

If we go to http://localhost:4200/tests we’ll see an error in the\nacceptance test like:

\n\n

\n \n\n

Error: Mirage: Your Ember app tried to GET '/friends',\n    but there was no route defined to handle this request.\n    Define a route that matches this path in your\n    mirage/config.js file. Did you forget to add your namespace?@ 269 ms\n

\n\n\n\n

That’s because we didn’t add the end-point friends to our mirage\nserver.

\n\n

Let’s tell mirage about the routes for friends, adding the following\nlines to the file mirage/config.js:

\n\n

mirage/config.js

\n\n

this.get('/friends');\nthis.post('/friends');\nthis.get('/friends/:id');\nthis.patch('/friends/:id');\nthis.delete('/friends/:id')\n

\n\n\n\n

After refreshing the tests page, we’ll see a new error like the following:

\n\n

Error: Pretender intercepted GET /friends but encountered an error:\nMirage: The route handler for /friends is trying to access the friend\nmodel, but that model doesn't exist. Create it using 'ember g\nmirage-model friend'.\n

\n\n\n\n

Mirage is telling us that there is a handler for friends but it doesn’t know about that model, we need to create the model in mirage with the command ember g mirage-model friend.

\n\n

If we refresh again, the acceptance tests will pass. Mirage also help\nus if we want to create fake data in the server. To do so, we need to\ncreate a factory and then fill the server with fake data before\nrunning the test. Let’s explore that next.

\n\n

We can create factories with the mirage-factory generator, to create\none for friends we can run the following command ember g\nmirage-factory friend and then let’s edit the factory to declare the\nattributes:

\n\n

\n \n\n

//\n// Mirage ships with Fajer.js which help us to create fake data\n//\n// See https://github.com/marak/Faker.js/\n//\nimport { Factory, faker } from 'ember-cli-mirage';\n\nexport default Factory.extend({\n  firstName() {\n    return faker.name.firstName();\n  },\n  lastName() {\n    return faker.name.lastName();\n  },\n  email() {\n    return faker.internet.email();\n  },\n  twitter: '@someone'\n});\n

\n\n\n\n

Once we have defined the factory, we can use it in our acceptance\ntest. Let’s create one for the friends index route and then assert\nthat the all the friend are rendered.

\n\n

First, let’s create the acceptance test running ember g acceptance-test friends

\n\n

tests/acceptance/friends-test.js

\n\n

import { test } from 'qunit';\nimport moduleForAcceptance from 'borrowers/tests/helpers/module-for-acceptance';\n\nmoduleForAcceptance('Acceptance | friends', {\n  beforeEach() {\n    //\n    // Mirage makes the variable server avaialble in our tests.\n    //\n    // We can use server.create('model-name') to create 1 entry in the\n    // mock server or use createList to create many.\n    //\n    //\n    server.createList('friend', '10');\n  }\n});\n\ntest('visiting /friends', function(assert) {\n  visit('/friends');\n\n  andThen(function() {\n    assert.equal(currentURL(), '/friends');\n\n    //\n    // This will fail since we are creating 10 friends, fix it :)\n    //\n    assert.equal(\n      find('table tbody tr').length,\n      9,\n      'assertion');\n\n  });\n});\n

\n\n\n\n

With this we can have some idea of what mirage allow us to do, we can\nwork with relationships and use mirage for development, but that’s out\nof the scope of this book, for more information check out the\ndocumentation\nhttp://www.ember-cli-mirage.com/docs/v0.2.x/.

\n\n

PODS

\n\n

This section has been removed until the\nModule Unification RFC arrives.

\n\n

For more information about future project structure, we recommend the\nfollowing talk: Ember.js NYC, May 2016: Robert Jackson on app structure

\n\n\n

Deploying Ember.js applications

\n\n

In this chapter we’ll explore different alternatives to deploy our\nEmber.js applications. We’ll talk about S3 and Pagefront based\ndeployments where our application is completely separated from our API.

\n\n

Deploying to S3

\n\n

In order to host our application in S3, we’ll need to change our\napplication adapter so it hits our CORS enabled API and then generate\na production build.

\n\n

To consume the API without using ember-cli’s proxy feature, we\nneed to set the property\nhost\nin the application adapter.

\n\n

To do so, let’s add a configuration property called host in\nconfig/environment.js and then read it from there.

\n\n

Adding host to config/environment.js

\n\n

/* jshint node: true */\n\nmodule.exports = function(environment) {\n  var ENV = {\n    host: 'https://api.ember-101.com',\n    // ...\n

\n\n\n\n

Now we can use it in the adapter. Let’s create the application adapter\nrunning ember g adapter application and then add the following:

\n\n

app/adapters/application.js

\n\n

import JSONAPIAdapter from 'ember-data/adapters/json-api';\nimport config from '../config/environment';\n\nexport default JSONAPIAdapter.extend({\n  host: config.host\n});\n

\n\n\n\n

We also need to change app/routes/index.js to use the host:

\n\n

app/routes/index.js

\n\n

import Ember from 'ember';\nimport config from '../config/environment';\n\nexport default Ember.Route.extend({\n  //\n  // Check the following for more information about services\n  // https://guides.emberjs.com/v2.5.0/applications/services/\n  //\n  ajax: Ember.inject.service(),\n  model()  {\n    return this.get('ajax').request(`${config.host}/friends`).then(function(data\\\n){\n      return {\n        friendsCount: data.data.length\n      };\n    });\n  }\n});\n

\n\n\n\n

Now we can stop the server and run it again without the option\n--proxy.

\n\n

Next we need to generate the production build using the command ember\nbuild.

\n\n

When we run ember server, we always run a build and add\nsome extra stuff so that we can run our project in development, but we\ndon’t need the same files in production.

\n\n

When we do ember build, the output goes by default to the directory\ndist. Let’s check that:

\n\n

ember build

\n\n

borrowers $ ember build\nember build\nBuilding\nBuilt project successfully. Stored in \"dist/\".\n

\n\n\n\n

Inspecting the dist directory, we’ll see the following contents:

\n\n

dist/\n|-- assets\n|-- |-- app.scss\n|-- |-- borrowers.css\n|-- |-- borrowers.js\n|-- |-- borrowers.map\n|-- |-- ember-basic-dropdown.scss\n|-- |-- ember-power-select\n|-- |-- |-- themes\n|-- |-- |-- |-- bootstrap.scss\n|-- |-- |-- variables.scss\n|-- |-- ember-power-select.scss\n|-- |-- failed.png\n|-- |-- font\n|-- |-- |-- fontello.eot\n|-- |-- |-- fontello.svg\n|-- |-- |-- fontello.ttf\n|-- |-- |-- fontello.woff\n|-- |-- |-- fontello.woff2\n|-- |-- passed.png\n|-- |-- test-loader.js\n|-- |-- test-support.css\n|-- |-- test-support.js\n|-- |-- test-support.map\n|-- |-- tests.js\n|-- |-- tests.map\n|-- |-- vendor.css\n|-- |-- vendor.js\n|-- |-- vendor.map\n|-- crossdomain.xml\n|-- index.html\n|-- robots.txt\n|-- testem.js\n|-- tests\n    |-- index.html\n

\n\n\n\n\n\n

Let’s talk about the assets directory first. All our JavaScript and\nstylesheet files will end in this directory. We can also put\nother kinds of assets, such as images or fonts, under public/assets and\nthey will be merged into this directory. If we had the image\npublic/assets/images/foo.png we could reference it in our stylesheets like\nimages/foo.png.

\n\n

What about those test files? They are used for testing and only\nincluded in development or test environments. If we go to\nhttp://localhost:4200/tests and inspect the network tab, we’ll see\nthat those files are being used.

\n\n

The tests directory is the entry point for running tests. testem.js\nis used by default when we do ember test. It uses Testem to run\nthe test with PhantomJS.

\n\n

If we run the build command but we specify production environment (e.g.,\nember build --environment production) we’ll see a very different\noutput:

\n\n

dist/\n|-- assets\n|-- |-- app.scss\n|-- |-- borrowers-0434066470763b4f6d79622e2bb60ffb.css\n|-- |-- borrowers-b01655dbaa5eaca990dcb5f786c3a2b9.js\n|-- |-- ember-basic-dropdown.scss\n|-- |-- ember-power-select\n|-- |-- |-- themes\n|-- |-- |-- +-- bootstrap.scss\n|-- |-- +-- variables.scss\n|-- |-- ember-power-select.scss\n|-- |-- font\n|-- |-- |-- fontello.eot\n|-- |-- |-- fontello.svg\n|-- |-- |-- fontello.ttf\n|-- |-- |-- fontello.woff\n|-- |-- +-- fontello.woff2\n|-- |-- vendor-6d05d317665a43d23c85eafd86e90654.css\n|-- +-â”€ vendor-8422fb84936d9c467a1a18d2ad95d6c5.js\n|-- crossdomain.xml\n|-- index.html\n+-â”€ robots.txt\n

\n\n\n\n

We have fewer files this time. Nothing related with testing is\nincluded because that is only a development/tests concern. Our assets\nfiles were fingerprinted and minified. If we open dist/index.html\nwe’ll see that the references to them were updated as well:

\n\n

<link rel=\"stylesheet\" href=\"assets/vendor-6d05d317665a43d23c85eafd86e90654.css\">\n<link rel=\"stylesheet\" href=\"assets/borrowers-0434066470763b4f6d79622e2bb60ffb.c\\\nss\">\n

\n\n\n\n

Fingerprinting is achieved using\nbroccoli-asset-rev.\nThis allows us the option to select the format of the files we want to\nfingerprint and to append an URL to every asset.

\n\n

Now we are ready to deploy to an S3 bucket. We need to create\nthe bucket and enable static website hosting. Let’s set up an\nindex document, index.html.

\n\n

The following guide explains how to set up your S3 bucket:\nHosting a Static Website on Amazon S3

\n\n

Once the bucket is set up, we can run ember build --environment\nproduction and then manually upload all the files under dist. The\nfollowing is an example of the site working on S3:\nhttp://ember-101.s3-website-us-east-1.amazonaws.com/

\n\n

It is very important that we set our bucket as public. To do this, we\ncan use the following bucket policy:

\n\n

S3 policy

\n\n

{\n\t\"Version\": \"2012-10-17\",\n\t\"Statement\": [\n\t\t{\n\t\t\t\"Sid\": \"AddPerm\",\n\t\t\t\"Effect\": \"Allow\",\n\t\t\t\"Principal\": \"*\",\n\t\t\t\"Action\": \"s3:GetObject\",\n\t\t\t\"Resource\": \"arn:aws:s3:::REPLACE-WITH-REAL-BUCKET-NAME/*\"\n\t\t}\n\t]\n}\n

\n\n\n\n

The following tutorial explains how to achieve a setup using custom\nrouting and Cloudfront: Hosting a Static Website on Amazon Web Services

\n\n

If we decide to use Cloudfront, we need to prepend the URL to our\nassets. To do this, we simply pass the option in the Brocfile as follows:

\n\n

Brocfile.js

\n\n

var app = new EmberApp({\n  fingerprint: {\n    prepend: 'https://d29sqib8gy.cloudfront.net/'\n  },\n});\n

\n\n\n\n

If we run ember build --environment production and open\ndist/index.html, we’ll notice the URL in our assets.

\n\n

<script src=\"https://d29sqib8gy.cloudfront.net/assets/vendor-b29ae2f2e402c33a5d9\\\nc683aac4e0f8e.js\"></script>\n<script src=\"https://d29sqib8gy.cloudfront.net/assets/borrowers-c459411ce1cc8332\\\nef795be81d96d1b6.js\"></script>\n

\n\n\n\n

A better approach for deployments would be to use the ember addon\nember-cli-deploy. Their website has a\ncomplete guide on how to use their addon.

\n\n

Deploying to Pagefront

\n\n

Pagefront is a PaaS for ember. This is\nprobably the easiest way to deploy ember applications today. They have\nan ember addon which makes the whole process super simple.

\n\n

First let’s install the addon with ember install, we’ll use\nember-101-GITHUB-HANDLE to identiy the application:

\n\n

ember install ember-pagefront --app=ember-101-abuiles\n

\n\n\n\n

After installing ember-pagefront, a new file config/deploy.js\nwill be created with the required data to deploy to pagefront.

\n\n

Next we can run ember deploy production and that’s it. Our\napplication will be deployed to\nhttps://ember-101-abuiles.pagefrontapp.com

\n\n

ember-cli-deploy

\n\n

Ember CLI deploy has become the\ndefault solution to manage deployments with ember. Pagefront use it\nunder the hood, and there are many other plugins available, which\nallow us to deploy to different platforms or just develop our own\nsolutions.

\n\n

We can find all the available options visiting the plugins section in\ntheir website http://ember-cli-deploy.com/docs/v0.6.x/plugins.

\n\n\n

Updating your project to the latest version of ember-cli

\n\n

Ember CLI is a project that is still moving quickly, so from time\nto time we’ll need to update our applications to use the latest\nversion.

\n\n

The best way to upgrade is to follow the release notes, which the core\nteam adds with every release.

\n\n

If we look at the following release\nhttps://github.com/ember-cli/ember-cli/releases/tag/v2.7.0-beta.4,\nwe’ll find notes about the commands that we need to run, notable\ndeprecation’s, and links to an example project called\nember-new-output\nwhich shows the changes after upgrading a project.

\n\n

Wrapping up.

\n\n

Ember can have a tough learning curve, but after getting the basics,\nyou’ll see that the time invested in learning will pay off. Not only\nit will make your more productive, but you’ll be able to take\nadvantage of its addon ecosystem and all the good stuff happening in\nthe JavaScript world. As Yehuda Katz said during Ember Conf 2016:\nEventually all the good ideas will end up in Ember.

\n\n

Learning Ember today is very different to the time when this book was\nfirst published. We have an official “Learning team”, they are doing a\nterrific job keeping the\nguides up to date and making sure that\nevery new feature is documented for mainstream adoption.

\n\n

If you are asking yourself were to go next, my recommendation would be\nstart building applications, since that will be the only way to get\nreal world experience. I’ll try to update the book as new features arrive\nand let you know what has changed in the release notes. You can also\nfollow me on twitter abuiles for\nupdates.

\n\n

Lastly, if you enjoy this book and want to support my work, you can do\nso buying my other book\nhttps://leanpub.com/json-api-by-example\nor if you download this book for free and think it was worth\nsomething, you can send me donations\nclicking here.

\n\n

Happy learning!

\n\n

Adolfo Builes

Notes

1http://speakingjs.com/↩

\n\n

2https://github.com/broccolijs/broccoli ↩

\n\n

3http://qunitjs.com/↩

\n\n

4https://github.com/airportyh/testem ↩

\n\n

5https://people.mozilla.org/~jorendorff/es6-draft.html ↩

\n\n

6http://expressjs.com/↩

\n\n

7The transpiling process is done with es6-module-transpiler.↩

\n\n

8To know more about AMD checkout their wiki ↩

\n\n

9Babel ↩

\n\n

10We recommend going through the documentation to get more insights on this adapter DS.JSONAPIAdapter.↩

\n\n\n

\n\n

\n\n","tocStructure",[349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423],{"_78":72,"_40":68,"_69":-5,"_73":74,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":68,"_69":-5,"_73":74,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":84,"_69":-5,"_73":85,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":90,"_69":-5,"_73":91,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":93,"_69":-5,"_73":94,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":96,"_69":-5,"_73":97,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":99,"_69":-5,"_73":100,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":102,"_69":-5,"_73":103,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":105,"_69":-5,"_73":106,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":108,"_69":-5,"_73":109,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":111,"_69":-5,"_73":112,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":115,"_69":-5,"_73":116,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":119,"_69":-5,"_73":120,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":123,"_69":-5,"_73":124,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":127,"_69":-5,"_73":128,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":130,"_69":-5,"_73":131,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":133,"_69":-5,"_73":134,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":137,"_69":-5,"_73":138,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":140,"_69":-5,"_73":141,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":143,"_69":-5,"_73":144,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":146,"_69":-5,"_73":147,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":149,"_69":-5,"_73":150,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":152,"_69":-5,"_73":153,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":155,"_69":-5,"_73":156,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":158,"_69":-5,"_73":159,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":161,"_69":-5,"_73":162,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":164,"_69":-5,"_73":165,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":167,"_69":-5,"_73":168,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":170,"_69":-5,"_73":171,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":173,"_69":-5,"_73":174,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":176,"_69":-5,"_73":177,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":179,"_69":-5,"_73":180,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":182,"_69":-5,"_73":183,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":185,"_69":-5,"_73":186,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":188,"_69":-5,"_73":189,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":191,"_69":-5,"_73":192,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":195,"_69":-5,"_73":196,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":198,"_69":-5,"_73":199,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":201,"_69":-5,"_73":202,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":204,"_69":-5,"_73":205,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":207,"_69":-5,"_73":208,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":210,"_69":-5,"_73":211,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":213,"_69":-5,"_73":214,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":216,"_69":-5,"_73":217,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":220,"_69":-5,"_73":221,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":223,"_69":-5,"_73":224,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":226,"_69":-5,"_73":227,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":229,"_69":-5,"_73":230,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":232,"_69":-5,"_73":233,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":236,"_69":-5,"_73":237,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":239,"_69":-5,"_73":240,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":242,"_69":-5,"_73":243,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":245,"_69":-5,"_73":246,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":248,"_69":-5,"_73":249,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":252,"_69":-5,"_73":253,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":255,"_69":-5,"_73":256,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":258,"_69":-5,"_73":259,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":261,"_69":-5,"_73":262,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":264,"_69":-5,"_73":265,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":268,"_69":-5,"_73":269,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":271,"_69":-5,"_73":272,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":274,"_69":-5,"_73":275,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":277,"_69":-5,"_73":278,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":280,"_69":-5,"_73":281,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":284,"_69":-5,"_73":285,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":287,"_69":-5,"_73":288,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":277,"_69":-5,"_73":290,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":292,"_69":-5,"_73":293,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":296,"_69":-5,"_73":297,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":300,"_69":-5,"_73":301,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":303,"_69":-5,"_73":304,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":306,"_69":-5,"_73":307,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":79,"_40":309,"_69":-5,"_73":310,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":83,"_40":313,"_69":-5,"_73":314,"_71":72,"_86":-5,"_87":-5,"_88":-5},{"_78":72,"_40":316,"_69":-5,"_73":317,"_71":72,"_86":-5,"_87":-5,"_88":-5},"publicChapterContent","nextChapter","sections",[],"routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Notes

Table of Contents

What you need to know about this book

Audience: Programmers with basic JavaScript knowledge.

Why should I read this book?

How to read this book

Can I learn Ember 2.0 with this book?

But you are still talking about controllers!

Ember in 2016.

Demo code on GitHub

Reporting Errata - Suggesting Edits.

Why Ember?

Anatomy

Conventions

Getting started

Requirements

ember new

Hands-on

Adding a friend resource

Connecting with a Backend

A word on Adapters

Playing with the resolver

Listing our friends

Creating our first Route.

Adding a new friend

Components

{{action}}

The input helper

Save it!

Viewing a friend profile

Visiting a friend profile

Quick Task

Updating a friend profile

Visiting the edit page.

Deleting friends

Mockups

Friends Index

friend profile

Installing Dependencies

Including Basscss

Including fontello

The header

Friends Index

New Friend And Friend profile template

The Dashboard

Articles Resource

Defining relationships.

Nested Loans Index

Rendering the index.

Fetching our friend loans.

Lending new articles

Completing the form

Computed Property Macros

Using components to mark a loan as returned.

Implementing auto save.

Route hooks

Working with JavaScript plugins

Installing moment

It’s a global!

Wrapping globals

Writing an Ember helper: format-date.

Working with libraries with named AMD distributions.

ember-ajax

A temporary replacement for moment.js

ember-browserify

Using ember-browserify

Wrapping up

Components and Addons

Web Components

ember-cli addons

ember-cli-fill-murray

Consuming fill-murray in borrowers

Ember Data

DS.Store Public API

peekAll

findAll

findRecord: Loading a single record

peekRecord

createRecord

Loading relationships