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

问题描述

我的背景是与 Linux 服务器管理相结合的老式 Web 开发和 LAMP 堆栈开发.这意味着我可以轻松地编写 HTML、PHP、CSS 和 JavsScript 以及管理 Linux 服务器.但是我决定就 Web 客户端技术而言，我需要有点现代"，并且正在我的 Mac OS X 10.9.5 机器上自学 EmberJS.核心版本如下:

• Ember CLI 版本: 1.13.12
• Node JS 版本: 4.2.2
• NPM(节点包管理器)版本: 2.14.10
• 守望者: 4.1.0

官方 EmberJS 站点上的基本自动更新把手模板"示例有效，但我迷失了

因为我是 EmberJS 的新手，所以我假设这是这个简单应用程序示例的正确文件夹结构，因为 templates/application.hbs 是我看到的唯一地方application.hbs 已安装，并且该简单主页示例中的所有路径都相对于某个根目录，对吗?但是当我尝试像这样运行它时:

ember 服务

它始终失败并出现以下错误:

版本:1.13.12http://localhost:49152 上的 Livereload 服务器服务于 http://localhost:4200/EEXIST:文件已经存在，符号链接'/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'

做一些基本的在线搜索让我相信这可能需要我像这样删除缓存文件和依赖项:

rm -rf node_modules tmp dist bower_components

然后像这样重新安装它们:

npm install &&凉亭安装

但即使完成了，同样的 EEXIST: 文件已经存在，符号链接... 再次弹出.

我做错了什么?我该怎么做才能启动并运行这个非常基本的示例?

解决方案

你在这里遇到的问题是你把 gravatar-image.js 文件放在了 templates/components 文件夹，它应该在 components 文件夹中.templates 文件夹内只有 *.hbs(templates 用于路由模板，templates/components 用于组件模板).

还有另一种构建文件夹的方法，称为 POD，其中有一个包含组件名称及其文件的文件夹.您的组件将是这样的:gravatar-image/component.jsgravatar-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屋！