帮酷LOGO
  • 显示原文与译文双语对照的内容


介绍

在本文中,我们将学习如何通过bobril嵌入式路由机制来处理路由定义。

背景

Bobril是由 Boris Letocha ( GMC软件技术中的软件架构师和开发者) 编写的面向组件的框架。 有关更多信息,请参见第一篇文章。

使用代码

准备环境

在尝试以下示例时,我建议使用 bobril-build github知识库中的预定义 simpleApp:

或者直接使用附加 simpleApp 。

强烈建议使用版本> = 3. x. x的npm 。 要检查 npm的版本类型,请执行以下命令:

npm -v
安装最新的 npm版本键入命令:
npm install npm@latest -g

要准备simpleApp然后由bobril生成在项目的root 中,向 命令行 键入以下命令:

npm i bobril-build -g
npm i
bb

现在,我们已经启动了一个简单的应用程序和 http://localhost:8080 服务器上的web服务器。

定义路由

Bobril有几种定义应用程序路由树的方法:

  • b.route - 定义路由 url,名称,处理程序和子路径列表
  • b.routes - 注册到应用程序的路由并调用 b.init
  • b.routeDefault - 如果当前url中没有指定子路径,则定义缺省路由

app.ts 中的路由定义示例:

import * as b from 'bobril';import { mainPage } from './page';import { pageOne } from './pages/pageOne';import { pageTwo } from './pages/pageTwo';
b.routes(
 b.route({ handler: mainPage }, [
 b.route({ url: '/one', name: 'one', handler: pageOne }),
 b.route({ url: '/two/:text?', name: 'two', handler: pageTwo }),
 b.routeDefault({ handler: pageOne })
 ])
);

整个应用程序将由处理程序 mainPage 处理,并在 url onetwo on url'/one' 和'/two'处理,处理程序 pageOnepageTwo 都处理。

如果未指定子路径,将使用默认处理程序 pageOne

页面 two的url在第二个斜杠之后包含一个参数规范。 它是由冒号和参数的名称定义的。 问号将参数定义为可选的。 然后,可以在 ctx.data.routeParams的处理程序上下文中找到路由参数。

处理页面中的路由

现在我们需要定义 mainPage 来呈现一些自己的内容和活动子路径的可视内容。 为此,我们将使用组件 ctx.data.activeRouteHandler 中提供的函数,因此可以更改 page.ts的代码,如下所示:

import * as b from 'bobril';exportconst mainPage = b.createComponent({
 render(_ctx: b.IBobrilCtx, me: b.IBobrilNode): void {
 me.children = [
 tag('h1', 'Routing example'),
 tag('hr'),
 tag('div', me.data.activeRouteHandler()),
 ];
 }
});

这个代码将呈现一个标题,一个行和当前活动子路径的可视内容。

现在,我们需要定义子页面和这些页面之间的转换。 Bobril提供以下功能和接口,用于以下目的:

  • b.IRouteTransition - 转换定义的接口( 目标名称,参数 等等 )
  • b.createRedirectReplace 创建 IRouteTransition 对象,使它的重定向为保存历史记录
  • b.createRedirectPush - 创建 IRouteTransition 对象,以使用保存历史记录重定向
  • b.runTransition - 根据输入 IRouteTransition 对象运行转换
  • b.link - 将输入 IBobrilNode 更改为指向指定 name的路由的链接,并使用指定的可选 params

页/pageone 。one 到页 two的重定向定义示例:

import * as b from 'bobril';import { textbox } from '../components/textbox';import { button } from '../components/button';
let value = '';exportconst pageOne = b.createComponent({
 render(ctx: b.IBobrilCtx, me: b.IBobrilNode): void {
 me.children = [
 textbox({ value, onChange: (newVal) => { value = newVal; b.invalidate(ctx); } }),
 button({
 title: 'Confirm',
 onClick: () => {
 b.runTransition(b.createRedirectPush('two', { text: value }));
 returntrue;
 }
 })
 ];
 }
});

调用 buttononClick 中的代码创建并运行到页面 two的转换,该对象使用定义 text 参数值的对象对页面进行。

上述转换必须由在 pages/pagetwo 。ts 中定义的pageTwo 处理程序处理:

import * as b from 'bobril';import { tag } from '../helper';import { loggedIn } from '../page';exportinterface IData {
 routeParams: { text?: string };
}exportinterface ICtx extends b.IBobrilCtx {
 data: IData;
}exportconst pageTwo = b.createComponent<IData>({
 render(ctx: ICtx, me: b.IBobrilNode): void {
 let value = (ctx.data.routeParams.text || '').trim();
 me.children = [
 tag('p', 'Your text: ' + (!!value? value : 'nothing')),
 b.link(tag('a', 'Go back'), 'one')
 ];
 }
});

页在它的ctx.data.routeParams.text 中接收 text 参数值,因这里可以以指定上下文和数据接口,并在页面组件的render 函数中使用 text 。 它还通过函数 b.link 定义了页面 one的链接节点。

转换可用性

有些情况下,我们需要管理当前路由上的当前页是否可以用或者是否可以以离开当前页。 对于这些目的,我们可以使用 IBobrilComponent的以下 static 函数:

  • canActivate - 它可以以通过返回 false 或者重定向到新的指定转换来停止 target 处理程序中的当前转换。
  • canDeactivate - 可以通过返回 false 或者重定向到新指定的转换来停止 source 处理程序中的当前转换

:,pages pages pages pages pages pages::: component component canDeactivate handle handle one component handle leaving

canDeactivate() {
 return!!value.trim() || confirm('The textbox is empty. Are you sure?');
}

:pages页/pagetwo 中添加 canActivate 函数定义,或者处理访问页 two 时未登录用户的函数定义:

canActivate() {
 if (loggedIn)
 returntrue;
 alert('You are not logged in!');
 return b.createRedirectReplace('one');
}

英镑注释:在 mainPage 中声明并设置 loggedIn 变量并导入到 pageTwo 。 请参见附加的simpleApp 中的page.ts

摘要

可以看到,bobril框架包含非常简单的路由机制,能够满足所有标准需求。

查看附加的 simpleApp插件,了解所有已经提到的函数。

历史记录

  • 2017-02-01 ( bobril-build@0.59.2.bobril@5.2.)
  • 2016-11-04修订版
  • 1 根据生成改为 simpleApp
  • 2015-11-22文章创建



Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语