在ember / ember-cli中的子文件夹中生成组件

Question

基于recommendations for the preparation for Ember 2.0 ...

  

•通常，将视图+控制器替换为组件
  •仅在路由级别使用控制器......

......我们应该避免使用Controller和View来支持Component s。我无法弄清楚和/或了解如何生成不是components文件夹的直接父项的组件，即 components / component-name.js 。

我当前的控制器文件夹类似于：

/controllers
    /account
        index.js
        edit.js
    /business
        index.js

基本上，有一些子文件夹可以根据应用程序的各个部分对逻辑进行分组。如何使用 组件完成此操作？

看到组件中必须有“ - ”，我试过，但是出错...

ember generate component account/index-module.js
You specified "account/index-module.js", but due to a bug in Handlebars (< 2.0) slashes within components/helpers are not allowed.

所有组件都必须像

components
    account-index.js
    account-new.js
    business-index.js

即。都在同一个文件夹中？通过添加我实际认为是组件的内容（例如video-viewer.js，text-editor.js，radio-button.js），这将开始失控。

我真的想在子文件夹中包含组件，但不确定如何执行此操作。

components
    /media
        /audio
            audio-player.js
        /video
            video-player.js
    /text-editing
        text-editor.js
        editor-toolbar.js

我的组件文件夹已经很糟糕，我刚刚开始：

是否可以将帐户/业务逻辑留在控制器中（看到它确实说你应该只在路由级别使用控制器）？

我真的很困惑这个“所有组件，所有时间”的惯例。

Answer 1

好的，所以我有同样的问题和ember 1.9-beta.3（那是我测试过的版本）。可以将组件嵌套在资源目录下。

这意味着您可以拥有一个＆＃34;用户＆＃34;路线或资源。并且假设您有一个只想与用户资源一起使用的组件，因此您希望将该组件放在资源目录下。

这样做的方法是将组件放在资源目录app/pods/user/component-name/template.hbs下。重要的是要记住组件必须在其名称中包含短划线。它不能只是.../user/component必须是.../user/component-name一个短划线。然后，您可以在模板中将该组件用作{{user/component-name}}。

此外，我认为这只有在你使用pod结构时才有可能。

Answer 2

由于断言表明这是由Handlebars 1.x引起的，并且很快就会推出。

Ember 1.9测试版目前支持这一点，但如果ember-cli的解析器现在可以使用它，那么我并不乐观。您可以阅读有关Handlebars 2.0 here的更多信息。

使用pods结构也有助于组织，我相信这将是未来推荐的策略。

目前，我建议不要担心！请记住，过渡计划将会顺利进行，并且随着Ember和Ember CLI的官方发布，您将获得弃用警告。

Answer 3

好吧，我认为这个问题/答案需要在2019年进行一些更新。大约一个月以来，我一直在使用Ember，并且我的components文件夹已经变成了笔筒。而且该教程和主要的API文档并未真正涵盖如何组织组件。

所以我当然搜索了。我唯一能找到的答案（像这样）是2014-2015年左右的，并没有反映现代的Ember。当我在Ember语法转换指南中找到this时，我即将接受命运。 （对Ember员工的注意：这是一个重要的问题，几乎每个新用户都会遇到这个问题。它应该在文档中更为突出。也许不是教程，但绝对是在“组件”部分）

实际上，您可以像这样在Ember的子文件夹下生成组件：

$ ember generate component foo/bar-baz
installing component
  create app/components/foo/bar-baz.js
  create app/templates/components/foo/bar-baz.hbs
installing component-test
  create tests/integration/components/foo/bar-baz-test.js

太好了，这些文件是在components/foo和templates/components/foo下创建的。要解析要在其他模板中使用的组件的名称，可以使用旧样式语法：

{{foo/bar-baz }}

或新样式尖括号语法：

<Foo::BarBaz />