当今,前端的发展可以说是飞速的,为了方便我们开发者,有很多人为我们打造了一些前端工具。
其中一个不可或缺的部分就是路由器或路由。
ember-route-layers 则是一个具有階層式路由能力的单页面应用程序的模块。其为 Ember.js 应用程序提供了额外的功能,使开发人员能够更加容易地组织大量复杂的路由。
在本文中,我们将介绍 Ember.js 和 ember-route-layers,以及说明如何使用它,使你的应用程序更加健壮且易于维护。
Ember.js 简介
Ember.js 是一个由 Yehuda Katz 与 Tom Dale 等人创建的 JavaScript 客户端框架,主要用于构建单页面应用程序。
Ember.js 主要关注以下几个事情:
- 内置的路由系统
- 动态数据绑定
- 预制组件和模板
ember-route-layers 简介
ember-route-layers 是针对 Ember.js 的一个 npm 包,它拥有以下特性:
- 可以将路由分为嵌套的子路由
- 支持多个同层路由器
- 可以组合同层级别路由并使它们的URL相互独立
通过这些特性,我们可以以更好的方式管理我们的 Ember.js 应用程序的路由。
安装
我们可以将 ember-route-layers 包通过 npm 安装到应用程序中:
--- ------- ------------------
安装后,我们需要在 app.js 文件中使用 RoutableMixin 将此功能添加到我们的应用程序对象中:
------ ----- ---- -------- ------ ------------- ---- ------------------------------------- ----- ------ - --------------------------------- - -- ---- ------ ---- --- ------ ------- -------
这个 mixin 会将 ember-route-layers 所需的功能添加到我们的应用程序中。现在我们可以使用这个 npm 包了。
如何使用 ember-route-layers
我们可以在我们的 Ember.js 应用程序中使用 ember-route-layers 包中提供的 mixin,以便在我们的路由中定义所需的任何层次结构。
例如,我们可以定义一个应用程序路由:
------ ----- ---- -------- ----- ---------------- - -------------------- -- --------- --- ------ ------- -----------------
然后我们可以定义应用程序的首层子路由:
------ ----- ---- -------- ----- --------- - -------------------- ------------- ------- --- ------ ------- ----------
现在我们已经定义了一个名为 Home 的子路由,当我们访问 /home URL 时,将渲染 {{outlet main}} 区域上的 home 模板。这是因为 ember-route-layers 包使我们能够更轻松地定义路由的子级和其定义的关系。
我们可以通过以下方式告诉 ember-route-layers,Home 路由是 Application 路由的子路由:
------ ------------ ---- --------------------------- ----- --------- - -------------------- ------------- ------- ------------------------- - ------ ------------------------- -------------- -- --- ------ ------- ----------
其中,我们使用了 parentLayer() 方法告诉 ember-route-layers “home” 路由的上层是 “应用”(即我们前面定义的“应用”)。
路由层数的父级也可以是另一个路由层:
------ ------- -------------------- ------------- -------- ------------------------- - ------ ----------------------------------------- -- ---
共存
使用 ember-route-layers 可以同时管理多个路由层。因此,如果需要将子路由放置在不同的路由器中,则可以将子路由添加到正确的路由器中。
例如,我们可以创建名称为“admin”的新路由,它具有名称为“管理”和“创建”子路由的两个子路由:
------ - ----- - ---- ------------------- ------ ----- ---- -------- ------ - ----------- - ---- ------------------------------------------- ------ - -------- - ---- ------------------------------------ ------ - ---------- - ---- --------------------------- ------ --------- ---- ----------- ------------------------------ - -- --------- ------------------ -------- ---------- - ----------------------- - ----- --- --- ----------------------- --- ----- ---------- - ------------------- ---------- -- --------------- -------------------- -------- ---------- - ----------------------- ------------------- --- -- --------------- -------------------- -------- ---------- - ----------------------- --------------------- ------------------ - ----- ----- --- --- --- ----- ------ - ------------------------------- - --------- -------------------- --------- ---------------- -------- --------------- ------------ ----------------------- --------------------- - ----------------------- - --------------- ---- --- ------------------ -- ----- - -------------------- --------------------- ----------------------- - ----- ------- --- -- --- ------ ------- -------
在此示例中,我们使用 setupManual 和 addRoute 函数来创建新的路由层。这是因为 setupManual 允许我们手动为任何路由层创建 ember-route-layers 基础设施,而 addRoute 函数可在此路由层内添加新路由。
URL共存
使用 ember-route-layers 时,一个重要的特点是不同路由层级别之间的 URL 是相互独立的。这就使我们能够更好地管理应用程序的路由。
例如,在上例中:
- /admin/dashboard 和 /teams/overview URL 是独立的,在两个路由之间没有联系
- admin 路由下的所有路由都可以在 /admin URL 上定义所有子路由,并且这些子路由可以拥有正确的 URL 形式
示例
为了更好地理解上面示例中进过的过程,我们来看一个简单的 Todo 应用,它使用 ember-route-layers 来实现子路由和分层路由。
安装
要在您的应用程序中使用 ember-route-layers,请使用以下命令安装它:
--- ------- ------------------
准备
在开始编写我们的代码之前,需要在应用程序中设置路由。我们可以使用 Ember CLI,在命令行中运行:
----- -------- ----- -----
将生成一个名为 todos 的文件,我们可以在这个文件中定义我们的路由:
-- ------------------- ------ ----- ---- -------- ------ ------- -------------------- ------- - ------ --------------------------- -- ---
该路由将使用模型提供数据给模板。
筛选
对于 Todo 应用程序,我们可能会希望根据筛选条件筛选目前要显示的待办事项列表。为此,我们创建一个名为“筛选条件”的层,它将允许我们将筛选器和应用程序路由解耦。
现在,我们在层内定义两个路由:一个用于显示所有未完成的待办事项,另一个是用于显示所有已完成的待办事项:
------ ----- ---- -------- ------ - ---------- - ---- --------------------------- ----- --- - ------ ----- --------- - ------------ ------ ------- -------------------- ------------ - ------- - -------- ----- -- -- ---------- - --------------------------------------- -- ------- - ------ ----- -- ------------------------- - ------ ------------------------- -------------- -- ------ -------------------- ---------- - ------------------------------------- -------------------------------- --- ---
在此示例中,我们通过调用 routeLayer() 函数来查找上一个应用程序路由,并将其设置为我们新的路由器的父级。
随后我们定义路由器:
------ ----- ---- -------- ------ - ---------- - ---- --------------------------- ------ ------- -------------------- ------- - -- -------- ----- --- - --------------------- ------ ------ --------- ---------- ------ - - ------------ ----- ----- ---- ---- -- -- - ------------ ----- ----- ---- ---- -- -- - ------------ --- ------- ----- ---- ---- -- -- -- --- ----- ----- - --------------------- ------ -------- --------- ---------- ------ - - ------------ ----- ----- ------ ---- -- -- - ------------ --- ------- ----- ------ ---- -- -- - ------------ --- ------- ----- ------ ---- -- -- -- --- ----- ---- - --------------------- ------ ------- --------- ---------- ------ - - ------------ ----- ----- ----- ---- -- -- - ------------ ----- ----- ----- ---- -- -- - ------------ ----- ----- ----- ---- -- -- -- --- ------ - ------- ----- ------ ------ -- -- ------------------------- - ------ ------------------- -------------- -- ---
在这个示例中,我们再次使用 routeLayer() 函数,这次是为我们的颜色路由器找到其父级 (当然就是 todos
路由器)。然后我们添加一个模型,该模型块包含一个对象数组 colors,每个对象都代表了一个颜色,并且拥有一个 todos 属性,包含由指定颜色的 Todo 。
然后我们定义两个路由:
------ ----- ---- -------- ------ - ---------- - ---- --------------------------- ----- --------- - ------------ ----- --- - ------ ------ ------- -------------------- ------------ ----- ------------ - ---------- - -------- ----- -- -- ---------- - -------------------------------------- -- ------------------------- - ------ ---------------------------- -------------- -- ----------- - ------ -------------------------------------------- -- ------- --- ------------------- ----- -- ---
我们使用了 routeLayer() 函数把路由器父级设置为它的“所有”路由器。
另一个路由:
------ ----- ---- -------- ------ - ---------- - ---- --------------------------- ----- --------- - ------------ ----- --- - ------ ------ ------- -------------------- --------- ----- --------------- ----- ------------ - --------- - ------------- ----- -- -- ------------------------- - ------ ------------------------- -------------- -- ------------- - --- ----- - ----------------------------------- -- ------ -------------------- ------- -------------------------- ------------------------------- -- -------- ------ ----------------- - ---- ---- ------ --------------------- ---- ---------- ------ --------------------------- -------- ------ --------------------- - -- --------------------------- ------ - ----------------------- ------- -------------------------- ---------------------- -------------------------------- ---------------------------- -------------------------- ---------------------------------------- -- ---
我们再次使用 routeLayer() 函数,但这次我们将路由器父级设置为其属于的颜色路由器。我们在这个路由中添加了一个 model,返回一个包含两个属性的对象:allTodos 和 completedTodos。allTodos 可以帮助我们缓存将使用的所有待办事项,而completedTodos 列表则是过滤所有已经完成的待办事项。
然后,我们使用 setupController() 方法来设置控制器所需的属性,并从当前路由中获取筛选条件。
现在,我们可以在我们的应用程序组件中渲染此模板:
---------- ------------------------------------ - ---------- --------------------------------------------- -------- ----------
它将显示两个筛选器链接,我们将它们定义为列表子路由。
{{outlet}} 插座现在将用对应筛选条件的信息填充。下一个模板将显示某个颜色待办事项所对应的分页链接:
------- ----- -- -------- ---------- ------------------ ------------------------------- ---------
最后,我们使用模板文件 todo.hbs 显示单个待办事项:
-------- ----- -------------------------
总结
ember-route-layers 可以让你更好地管理 Ember 应用程序的路由。它允许你将路由分为嵌套的子路由,并支持多个不同的路由器层。此外,它还使不同层之间的 URL 相互独立,从而使我们能够更好地管理 Ember 应用程序的路由。
在实践中,您可以将 ember-route-layers 与其他 Ember 插件如 Ember Data 和 Ember Components 结合使用,以构建复杂和灵活的单页面应用程序。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066e1ba563576b7b1ecc38