在ember / ember-cli中的子文件夾中生成組件

Question

根據Ember 2.0的准備建議 ......

•通常，將視圖+控制器替換為組件
•僅在路由級別使用控制器...

...我們應該避開Controller和View ，而選擇Component 。 我無法弄清楚和/或理解如何生成不是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（這是我測試的版本）。 可以將組件嵌套在資源目錄下。

這意味着您可以擁有“用戶”路線或資源。 並且假設您有一個只想與用戶資源一起使用的組件，因此您希望將該組件放在資源目錄下。

這樣做的方法是將組件放在資源目錄app/pods/user/component-name/template.hbs 。 重要的是要記住組件名稱中必須包含破折號。 它不能只是.../user/component它必須是.../user/component-name with a dash。 然后，您可以在模板中將組件用作{{user/component-name}} 。

此外，我認為這只有在你使用pod結構時才有可能。

Answer 2

由於斷言表明這是由Handlebars 1.x引起的，並且很快就會推出。

Ember 1.9 beta版本目前支持這一點，但如果ember-cli的解析器現在可以使用它，我不是肯定的。 您可以在此處閱讀有關Handlebars 2.0的更多信息。

使用pods結構也有助於組織，我相信這將是未來推薦的策略。

現在，我建議不要擔心！ 請記住，過渡計划將順利進行，並且隨着Ember和Ember CLI的官方發布，您將獲得棄用警告。

Answer 3

好的，我認為這個問題/答案需要2019年的更新。我已經使用了大約一個月的Ember，而我的組件文件夾已經變成了豬圈。 本教程和主要API文檔並未真正介紹如何組織組件。

所以我做了一個搜索當然。 我能找到的唯一答案（就像這一個）來自2014 - 2015年左右，並沒有反映現代的Ember。 當我在Ember語法轉換指南中找到它時，我正要接受我的命運。 （ 請注意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 />