You just want things to render while you’re doing the tutorial in the Ember Guides… is that too much to ask?!?! Here are common mistakes, what the errors look like, and how to fix them.
Common Mistakes
- Missing # or / in conditional template helper
- Missing # or / in each helper
- Using a semicolon instead of a comma inside the
actionsof a component.js - Forgetting to return something from the model hook
- Missing quotation marks in gets and sets
- Copying and pasting files instead of using the Ember CLI to generate them
- Using an npm package without ember-browserify
- Silly typos (that you’ll take forever to find without a systematic strategy)
1. Missing # or / in conditional template helpers
The Correct Syntax: {{#if isWorking}} show some text {{/if}}
The symptoms: Forgetting a #, /, or both will cause one of three different errors…
About this last error message, it’s especially confusing because it’s recommending a different usage of “if” than you’re probably trying to do. There are three kinds of if helpers (aka Conditionals) in Ember. You can learn more about them in the Ember Guides.
2. Missing # or / in each helper
The correct syntax:
{{each superheroes as |hero|}}
<li>{{hero.name}}</li>
{{/each}}The symptoms: Like the if helpers, forgetting a #, /, or both in an each helper causes different errors…
3. Using a semicolon instead of a comma inside the actions of yourComponent.js
The correct syntax: Your actions are an object, similar to var person = { name: "Tony Stark", alias: "IronMan", handsome: true} . But developers have a habit of putting ; at the end of functions, when in reality each function in your actions object should be separated by a comma.
There are a few symptoms:
4. Forgetting to return something from the model hook
The correct syntax:
model() {
return this.store.findAll('hero');
}The symptoms: If you forget the “return” in your model hook, your data will simply be missing in your app. There may possibly be no errors in the console, no alerts from vegetables, nada.
The diagnosis: The easiest way to figure out what’s going on is to put {{log yourModelName}} in the template where you are trying to use the data. If it prints “null” to the console, you’ll have an idea of what’s going on, and should check the model hook in yourRouteName.js. Using this log helper is a quick and easy way to narrow down the problem. You could also check the network tab of your developer tools to see what API calls, if any, are being made.
5. Missing quotation marks in gets and sets
The correct syntax: this.get('modelName')
The symptoms: it’s so easy to forget those quotation marks, and it might send you barking up the wrong tree.
6. Copying and pasting files instead of using the Ember CLI to generate them
Copying and pasting files around in Ember is A Very Bad Thing. Don’t do it. Once, a senior developer and I spent the better part of the day debugging an Ember app that had a route file in the wrong folder. Additionally, there are restrictions on how you can name files in Ember, so if you rename things, you might do it wrong.
The right way: never copy and paste files. Especially not routes. You should use Ember’s command line tool (aka CLI) to generate files. For example, ember g component my-component-name or ember g route parentroute/childroute Consult the Ember CLI documentation for more details.
The symptoms of The Very Bad Thing: The symptoms can manifest themselves in a thousand different ways. It’s impossible to cover them all. If you’re at your wits end debugging a component, helper, or route that can’t be found, you likely either have a spelling error/typo in its name, or you’ve put those files in the wrong place.
7. Using an npm package without ember-browserify
You can’t just use npm packages willy nilly in Ember. There are many in-depth articles on various options, but I’ll share the easiest solution.
The right way: First, check Ember Observer to see if someone has already gone through the work to make the npm addon easy to use in Ember.
No ember addon? Good news, you can still use that npm package. Do ember install ember-browserify in the command line. Why ember-browserify?It’s a long story… maybe don’t read it right now. Then, if you haven’t already done this, npm install --save-dev package-name . Don’t forget to restart your server. In order to use the npm package in one of your JavaScript files, you need to import it at the top, like so:
import 'moment' from 'npm:moment';The symptoms of not using browserify, like import moment from ‘moment'; …
8. Silly typos (that you’ll take forever to find without a systematic strategy)
Some of these tips are basic developer debugging skills, but here are a few to get you started when something is not defined, can’t be found, etc:
console.log(‘my filename and function name’, thingToLog)and I put it in every function that could possibly be causing the problem. Then you’ll see where the chain of “Data down, actions up” is broken- use
{{log yourModelName}}anywhere in a template where you expect to see some data that’s not showing up - Do a text search of your entire project for the name of the thing that’s missing. It’s really easy to miss a letter. If your search has too few results, you’ll know what’s wrong.
- Compare your Ember Data requests with the response from the API (go to your developer inspector, choose the network tab, click on each request, and look at the response tab). Your typo might be in the back end!
If you are still stuck…
… hop on the Ember Community Slack and post in the #help channel. It helps to state your experience level with Ember when you’re asking a question, so that other users will give more detailed explanations and use less jargon. It’s ok to ask clarifying questions. Try to be patient… you may not get a response for a few hours. Everyone is welcome :)
