前言：本文介绍 npm 包 ember-route-routable-components-shim 的使用教程，主要针对有一定 Ember.js 知识基础的前端开发者。如果你还不了解 Ember.js，建议先查看官方文档入门。
背景
在 Ember.js 中，组件通常被设计成可以重复利用的，与视图（route）是分离的。但在某些情况下，我们需要将组件直接嵌入到路由中，实现更细粒度的控制和更好的组织方式，而当前 Ember.js 框架并不支持这种模式。
在这种情况下，我们可以使用 npm 包 ember-route-routable-components-shim，它提供了一个简单的 API 用来更轻松地使用 routable components 模式。
安装
要使用 ember-route-routable-components-shim，可以通过 npm 进行安装：
npm install --save-dev ember-route-routable-components-shim
安装完成后，就可以通过 ember-cli-build.js 文件启用 shim。
-- -------------------- ---- -------
-- ------------------
----- -------- - --------------------------------------------
-------------- - ------------------ -
----- --- - --- ------------------ -
-- --- ------- ----
---
-- ------ --- ---- ------
------------------------------------------------------------------------ -
-------- -
--------------------------------------- -
-----------------
-------------------
-
-
---
-- ------ --- --- --------
------ -------------
-使用
1. 注册路由和组件
使用此 shim 模块之前，必须首先注册路由和组件。路由和组件的注册过程分别为：
-- -------------------- ---- ------- -- ------------- ------ ----------- ---- ------------------------ ------ ------ ---- ----------------------- ------ - -------------- - ---- --------------------------------------- ----- ------ - -------------------- --------- -------------------- -------- -------------- --- --------------------- - ------------------- --- -----------------------
-- -------------------- ---- ------- -- ------------------------------- ------ --------- ---- ------------------- ------ - ----------------- - ---- --------------------------------------- ------ ------- ------------------ -- --------- ---------- --- ------------------------------- -----------------
2. 声明路由的 components 属性
声明 components 属性后，每个属性值都映射到用于呈现的组件名称。
-- -------------------- ---- -------
-- ------------------
------ ----- ---- -----------------------
------ ------- --------------
----------- -
------------- ---------------
-
---3. 把 component 插入到路由对应的 template
最后，在路由对应的 template 中，可以像使用其他 components 一样使用注册的路由 components：
{{!-- app/templates/home.hbs --}}
{{posts-list}}大功告成！现在你可以像使用常规 components 一样使用注册的路由 components。
示例代码
在示例文件夹中，你会找到一个简单的 Ember 应用程序示例，其中包含一个 home 路由和一个 posts-listing 组件。
- 在终端中，导航到项目根目录。
- 运行
npm install安装项目依赖。 - 运行
ember serve启动 Ember 应用程序。 - 导航到
http://localhost:4200/home查看效果。
总结
本文介绍了如何使用 npm 包 ember-route-routable-components-shim，使得在 Ember.js 中使用 routable components 更加方便。希望熟悉 Ember.js 的前端开发者能够从中受益，若有不当之处，敬请指正。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc3f