我用ember generate为我正在关注的youtube视频创建了一个标题组件。我有几个问题-
1.当我运行ember generate component header时,终端响应在app〉components中创建header.hbs文件,但随后跳过app/components中的header.js。我在该目录中手动创建了一个header.js文件,如果我在js文件中执行alert(),它就可以工作。
1.我在我的头文件.hbs中有以下代码。
<h1>Hello There!</h1>
{{yield}}
在我的应用程序.hbs文件中:
<Header/>
{{outlet}}
有什么想法和建议?2事先感谢您的帮助!
1条答案
按热度按时间xqkwcwgp1#
让我试着解释一下。基本上有4种成分在ember。
没有
.js
文件:当你调用一个组件时,ember会首先查找组件类。当它 * 没有 * 找到这样的类时,它的行为取决于可选的特性
template-only-glimmer-components
。这在新的octane应用程序中默认启用。如果它 * 是 * 启用ember将查找基于一些标准规则的组件模板,并使用它,但将有 * 没有 * 支持类。这是相当不错的。这也基本上是什么,你在一个辛烷值应用程序时,你做
ember g component my-component
。当
template-only-glimmer-components
被禁用时,一个 implicit 经典组件类将被自动创建并与正确的模板一起使用。您不希望出现这种行为。如果您仍然有这种行为,您可以通过1)为每个组件创建一个.js
文件,然后2)启用template-only-glimmer-components
来迁移它。使用
.js
文件当找到一个
js
文件时,ember将得到该模块的default
导出,然后查找正确的组件管理器,这实际上取决于该导出:setComponentManager
。这通常是在@ember/component
或@glimmer/component
的基类中完成的。但是,您 * 也可以 * 编写自己的自定义组件管理器。基本上,ember也会基于该组件查找模板。this RFC中提出了一个用于此目的的公共API,但是目前一个私有的API被用于所谓的 template co-location,在这里你把你的
.hbs
文件放在你的.js
文件旁边,它们具有相同的名称,只是扩展名不同。这是默认的八分位。这里有一个成员内部构建-ember-cli
中的步骤基本上是将您的模板添加到.js
文件中并使用该API。您也可以在浏览器调试器中看到结果。因此,如果没有默认导出,则ember无法找到您的模板。