呈现自定义组件的问题

Question

[我尝试使用emberJS为我的应用程序创建一个自定义组件，我遵循了快速入门指南，现在尝试创建一个上载按钮作为组件。

似乎我没有代码问题，但我的组件未在主页上呈现。我已经使用ember组件生成器来创建它

这里是我的upload-button.hbs：

<button type="button">{{@buttonText}}</button>

现在是我的upload-button.js：

import Component from '@ember/component';

export default Component.extend({
    actions: {
        showExplorer(){
            alert()
        }
    }
});

目前我只是将alert()方法放入showExplorer()

现在是我的主页application.hbs：

<upload-button @buttonText="Uploader un fichier" {{action "showExplorer"}}/>

{{outlet}}

我希望看到我的按钮，但是我只有空白页，没有代码错误。

我怀疑这是一个非常愚蠢的错误，但我找不到它。

Answer 1

很高兴您决定尝试Ember.js :)您的upload-button.hbs和upload-button.js文件看起来不错。但是，这里有两个问题。

• 该组件，当使用尖括号语法（<... />）调用时，名称应为CamelCased以区分HTML标记和Ember组件。因此，我们需要将upload-button组件调用为<UploadButton />。

• 您在组件（showExplorer）文件中定义了动作upload-button.js，但在application.hbs文件中引用了该动作。由于组件体系结构具有隔离性，因此只能在组件的.hbs文件内部访问后备组件文件中的数据。另外，我们只能将使用{{action}}修饰符的操作附加到DOM元素，而不附加到组件本身。因此，

我们需要从application.hbs文件中删除操作绑定，

{{!-- application.hbs --}}

<UploadButton @buttonText="Uploader un fichier"/>

并在upload-button.hbs文件中添加相同内容：

{{!-- upload-button.hbs --}}

<button type="button" {{action "showExplorer"}}>{{@buttonText}}</button>

可以在此CodeSandbox中找到工作模型

希望您发现学习Ember，一个有趣的过程！