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，一个有趣的过程！

渲染自定义组件时出现问题

1 个答案: