Guidance on how to setup the basic “Components” example from the official EmberJS homepage

问题

My background is in old-school web development and LAMP stack development mixed with Linux server administration. Meaning I can code HTML, PHP, CSS and JavsScript—as well as manage a Linux server—with ease. But have decided I need to be a bit “modern” as far as web client side technology goes and am teaching myself EmberJS on my Mac OS X 10.9.5 machine. Core versions are as follows:

• Ember CLI version: 1.13.12
• Node JS version: 4.2.2
• NPM (Node Package Manager) version: 2.14.10
• Watchman: 4.1.0

The basic “Auto-Updating Handlebars Templates” example on the official EmberJS site works, but I am lost on the “Components” example on the EmberJS homepage.

My process so far as been to init a new app like this:

ember new new-app

Then once that is done and the folder structure is built, I am simply creating new documents based on that “Components” example as follows; see screenshot for an example:

• app/templates/components/gravatar-image.js
• app/templates/application.hbs
• app/templates/components/gravatar-image.hbs

Since I am new to EmberJS I am assuming this is the proper folder structure for this simple app example since templates/application.hbs is the only place I am seeing application.hbs installed and all of the paths on that simple homepage example are relative to some root, correct? But when I attempt to run it like this:

ember serve

It consistently fails with the following error:

version: 1.13.12
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
EEXIST: file already exists, symlink '/path/to/new-app/tmp/template_compiler-input_base_path-97V11oKY.tmp/0/ember-sandbox/templates/components/gravatar-image.js' -> '/Applications/MAMP/htdocs/Ember-Sandbox/tmp/template_compiler-output_path-Tn5z8iTb.tmp/ember-sandbox/templates/components/gravatar-image.js'

Doing some basic online searches led me to believe it might require me to delete cached files and dependencies like this:

rm -rf node_modules tmp dist bower_components

And then reinstall them like this:

npm install && bower install

But even after that’s done, the same EEXIST: file already exists, symlink… pops up again.

What am I doing wrong? And what can I do to get this very basic example up and running?

回答1:

The problem you have here is that you have placed the gravatar-image.js file in the templates/components folder and it should be in the components folder. Inside templates folder goes only *.hbs (templates is used for route templates and templates/components is used for component templates).

There is another way of structuring the folders called POD in which you have a folder with the name of the component and its files inside. With your component would be like this: gravatar-image/component.js gravatar-image/template.hbs

Check this tutorial if you are interested in using this POD structure.

来源：https://stackoverflow.com/questions/33773650/guidance-on-how-to-setup-the-basic-components-example-from-the-official-emberj