了解Ember 2中的组件

关键要点

• Ember组件是Ember应用的核心，允许开发者定义自定义的、特定于应用的HTML标签，并使用JavaScript实现其行为。在Ember 2.x中，组件取代了视图和控制器。
• Ember组件包含一个Handlebars模板文件和一个配套的Ember类。这些组件可以与其他组件一起使用，甚至可以嵌套在父组件中，并具有类似于原生HTML元素的属性。
• 可以通过模型（表示应用程序向用户呈现的基础数据的对象）向Ember应用程序添加动态数据。这允许创建交互式和动态组件。
• 可以使用操作（发送到组件类的动作）向组件添加用户交互。这些操作可用于创建交互式元素，例如显示不同内容的可点击选项卡。

本文由Edwin Reynoso和Nilson Jacques同行评审。感谢所有SitePoint的同行评审者，使SitePoint的内容达到最佳状态! 组件是Ember应用程序的重要组成部分。它们允许您定义自己的、特定于应用程序的HTML标签，并使用JavaScript实现其行为。从Ember 2.x开始，组件将取代视图和控制器（已被弃用），并且是构建Ember应用程序的推荐方法。

Ember对组件的实现尽可能地遵循W3C的Web组件规范。一旦自定义元素在浏览器中广泛可用，应该很容易将Ember组件迁移到W3C标准，并使其可被其他框架使用。

如果您想了解更多关于可路由组件为什么取代控制器和视图的信息，请查看Ember核心团队成员Yehuda Katz和Tom Dale的这段简短视频。

选项卡切换器应用程序

为了深入了解Ember组件，我们将构建一个选项卡切换器小部件。这将包含一组带有相关内容的选项卡。点击一个选项卡将显示该选项卡的内容并隐藏其他选项卡的内容。够简单吧？让我们开始吧。

与以往一样，您可以在我们的GitHub仓库或这个Ember Twiddle上找到本教程的代码，如果您想在浏览器中试验代码的话。

Ember组件的构成

Ember组件包含一个Handlebars模板文件和一个配套的Ember类。只有当我们需要与组件进行额外的交互时，才需要实现此类。组件的使用方式类似于普通的HTML标签。当我们构建选项卡切换器组件时，我们将能够像这样使用它：

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Ember组件的模板文件位于app/templates/components目录中。类文件位于app/components中。我们使用所有小写字母，单词之间用连字符分隔来命名Ember组件。这是按照约定来命名的，这样可以避免与未来的HTML Web组件发生名称冲突。

我们的主要Ember组件将是tab-switcher。请注意，我说的是主组件，因为我们将有多个组件。您可以将组件与其他组件结合使用。您甚至可以将组件嵌套在另一个父组件中。在我们的tab-switcher的情况下，我们将有一个或多个tab-item组件，如下所示：

<code>{{tab-switcher}}{{/tab-switcher}}</code>

如您所见，组件也可以像原生HTML元素一样具有属性。

创建Ember 2.x项目

要遵循本教程，您需要创建一个Ember 2.x项目。方法如下：

Ember使用npm安装。有关npm的教程，请参见此处。

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

在撰写本文时，这将引入版本1.13

<code>npm install -g ember-cli
</code>

接下来，创建一个新的Ember应用程序：

<code>ember -v
=> version: 1.13.8
</code>

导航到该目录并编辑bower.json文件以包含最新版本的Ember、ember-data和ember-load-initializers：

<code>ember new tabswitcher</code>

回到终端运行：

<code>{
  "name": "hello-world",
  "dependencies": {
    "ember": "^2.1.0",
    "ember-data": "^2.1.0",
    "ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
    ...
  }
}
</code>

Bower可能会提示您进行Ember的版本解析。从提供的列表中选择2.1版本，并在其前面加上感叹号以将其解析持久化到bower.json。

接下来启动Ember CLI的开发服务器：

<code>bower install
</code>

最后导航到http://localhost:4200/并检查浏览器控制台的版本。

创建选项卡切换器组件

让我们使用Ember内置的生成器创建一个选项卡切换器组件：

<code>ember server</code>

这将创建三个新文件。一个是我们的HTML的Handlebars文件（app/templates/components/tab-switcher.hbs），第二个是我们的组件类的JavaScript文件（app/components/tab-switcher.js），最后一个是测试文件（tests/integration/components/tab-switcher-test.js）。测试组件不在本教程的范围内，但您可以在Ember网站上阅读更多相关信息。

现在运行ember server来加载服务器并导航到http://localhost:4200/。您应该会看到一个标题为“欢迎来到Ember”的欢迎消息。那么为什么我们的组件没有显示出来呢？好吧，我们还没有使用它，所以让我们现在就使用它。

使用组件

打开应用程序模板app/templates/application.hbs。在h2标签后添加以下内容以使用组件。

<code>ember generate component tab-switcher</code>

在Ember中，组件可以通过两种方式使用。第一种方式，称为内联形式，是在不包含任何内容的情况下使用它们。这就是我们在这里所做的。第二种方式称为块形式，允许将Handlebars模板传递给组件，并在组件模板中{{yield}}表达式出现的地方呈现该模板。在本教程中，我们将坚持使用内联形式。

但是，这仍然没有在屏幕上显示任何内容。这是因为组件本身没有任何内容要显示。我们可以通过向组件的模板文件（app/templates/components/tab-switcher.hbs）添加以下行来更改这一点：

<code>{{tab-switcher}}{{/tab-switcher}}</code>

现在，当页面重新加载（应该会自动发生）时，您将看到上面显示的文本。令人兴奋的时刻！

创建选项卡项目组件

既然我们已经设置了我们的主要tab-switcher组件，让我们创建一些tab-item组件来嵌套在其中。我们可以像这样创建一个新的tab-item组件：

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

现在将新组件的Handlebars文件（app/templates/components/tab-item.hbs）更改为：

<code>npm install -g ember-cli
</code>

接下来，让我们将三个tab-items嵌套在我们的主要tab-switcher组件中。将tab-switcher模板文件（app/templates/components/tab-switcher.hbs）更改为：

<code>ember -v
=> version: 1.13.8
</code>

如上所述，yield辅助函数将呈现传递到我们组件中的任何Handlebars模板。但是，这只有在我们以块形式使用tab-switcher时才有用。由于我们没有这样做，我们可以完全删除yield辅助函数。

现在，当我们查看浏览器时，我们将看到三个tab-item组件，所有组件都显示“Tab Items Title”。我们的组件现在相当静态，所以让我们添加一些动态数据。

(剩余部分与上一个输出类似，只是对段落进行了重新组织和措辞的修改，以保持内容一致性并避免重复。 为了节省空间，这里不再重复剩余部分的输出。)

以上是了解Ember 2中的组件的详细内容。更多信息请关注PHP中文网其他相关文章！