关于如何从官方EmberJS主页设置基本“组件”示例的指导 [英] Guidance on how to setup the basic “Components” example from the official EmberJS homepage

问题描述

我的背景是老式的Web开发和LAMP堆栈开发与Linux服务器管理的混合。意义我可以编写HTML，PHP，CSS和JavsScript，以及轻松管理Linux服务器。但是我决定我需要一点点现代化，就像Web客户端技术一样，在我的Mac OS X 10.9.5机器上教我自己的EmberJS。核心版本如下：

• Ember CLI版本： 1.13.12

节点JS版本： 4.2.2

• NPM（节点包管理器）版本： 2.14.10


• Watchman： 4.1.0

基本的自动更新手柄模板例如官方EmberJS网站上的作品，但是我在

由于我是EmberJS的新手，我假设这是这个简单应用程序示例的正确的文件夹结构，因为 templates / application.hbs 是我看到的唯一的地方，我看到 application.hbs 安装并且那个简单的所有路径主页的例子是相对于一些根，正确吗？但是当我尝试像这样运行时：

  ember serve 
  

它一直失败，出现以下错误：

 版本：1.13 .12 
 http：// localhost上的Livereload服务器：49152 
服务于http：// localhost：4200 / 
 EEXIST：文件已存在，symlink'/ path / to / new-app /tmp/template_compiler-input_base_path-97V11oKY.tmp/0/ember-sandbox/templates/components/gravatar-image.js' - > 'A / P / p $ p> 
 
 
进行一些基本的在线搜索，导致我相信可能需要我删除这样的缓存文件和依赖项：
  rm -rf node_modules tmp dist bower_components 
  
然后重新安装他们喜欢这样：
  npm安装&& bower install 
  
但即使这样做，相同的 EEXIST：文件已经存在，符号链接... 再次弹出。
 
 
 
我做错了什么？我可以做些什么来获得这个非常基本的例子？
解决方案
你在这里遇到的问题是你已经放置 templates / components 文件夹中的 gravatar-image.js 文件，它应该在组件文件夹。 模板文件夹中只有 *。hbs （ templates 用于路线模板和 templates / components 用于组件模板）。
 
 
 
还有另一种方式来构造名为 POD 的文件夹，其中包含组件名称及其文件的文件夹。您的组件将如下所示：
  gravatar-image / component.js  
  gravatar-image / template.hbs  
 
 
 
检查本教程如果您有兴趣使用这个 POD 结构。
 
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?
解决方案
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.

                        
这篇关于关于如何从官方EmberJS主页设置基本“组件”示例的指导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！