渲染自定义组件的问题

Question

我尝试使用 emberJS 为我的应用程序创建一个自定义组件，我已经按照快速入门教程进行操作，现在我尝试创建一个上传按钮作为组件。

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

这里是我的上传-button.hbs :

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

现在我上传-button.js :

import Component from '@ember/component';

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

目前我只是在showExplorer()

中放了一个alert()方法

现在是我的主页，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 />.
您在组件 (upload-button.js) 文件中定义了您的操作 showExplorer，但在 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 是一个有趣的过程！

渲染自定义组件的问题

Problem with rendering a custom component

javascript

components

ember.js