ember.js 呈现自定义组件时出现问题

tjjdgumg 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(232)

我试着用emberJS为我的应用程序创建一个自定义组件，我已经按照快速入门教程学习了，现在我试着创建一个上传按钮作为组件。
看起来我没有代码问题，但是我的组件不能呈现在我的主页上。我使用了ember组件生成器来创建它
这是我上传按钮。hbs：

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

现在我的上传按钮. js：

import Component from '@ember/component';

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

目前我只是将一个alert()方法放在showExplorer()中
现在是我主页，应用程序。hbs：

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

{{outlet}}

我希望看到我的按钮，但我只是有一个空白页，没有代码错误。
我怀疑这是个愚蠢的错误，但我找不到。

ember.js

来源：https://stackoverflow.com/questions/58698593/problem-with-rendering-a-custom-component

1条答案

按热度按时间

3pvhb19x1#

很高兴你决定试用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中找到
希望你发现学习灰烬，一个有趣的过程！

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js 呈现自定义组件时出现问题

1条答案

相关问题

热门标签

最新问答