TypeScript Outlet.Outlet函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@dojo/routing/Outlet.Outlet函数的典型用法代码示例。如果您正苦于以下问题：TypeScript Outlet函数的具体用法？TypeScript Outlet怎么用？TypeScript Outlet使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了Outlet函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: Outlet

import { Outlet } from '@dojo/routing/Outlet';
import { MapParamsOptions } from '@dojo/routing/interfaces';

const mapParams = ({ params }: MapParamsOptions) => {
	return {
		slug: params.slug
	};
};

export const EditorNewOutlet = Outlet({ index: 'editor' }, 'new-post', { mapParams });
export const EditorEditOutlet = Outlet('editor', 'edit-post', { mapParams });

开发者ID:agubler，项目名称:examples，代码行数:11，代码来源:EditorOutlet.ts

示例2: Outlet

import { Outlet } from '@dojo/routing/Outlet';

export const RegisterOutlet = Outlet('register', 'register');

开发者ID:agubler，项目名称:examples，代码行数:3，代码来源:RegisterOutlet.ts

示例3: Outlet

import { Outlet } from '@dojo/routing/Outlet';

export const SettingsOutlet = Outlet('settings', 'settings');

开发者ID:agubler，项目名称:examples，代码行数:3，代码来源:SettingsOutlet.ts

示例4: Outlet

import { Outlet } from '@dojo/routing/Outlet';
import { MapParamsOptions } from '@dojo/routing/interfaces';

import { TodoList } from './../widgets/TodoList';

export const TodoListOutlet = Outlet(TodoList, 'filter', { mapParams: ({ params, router }: MapParamsOptions) => {
	return { filter: params.filter };
}});

export default TodoListOutlet;

开发者ID:agubler，项目名称:examples，代码行数:10，代码来源:TodoListOutlet.ts

示例5: filter

}

function filter(filterName: string = 'all', todo: Todo): boolean {
	switch (filterName) {
		case 'completed':
			return !!todo.completed;
		case 'active':
			return !todo.completed;
		default:
			return true;
	}
}

function mapFilterRouteParam({ params }: any) {
	return { activeFilter: params.filter };
}

@theme(css)
export default class TodoList extends ThemedMixin(WidgetBase)<TodoListProperties> {
	protected render() {
		const { activeFilter, todos, toggleTodo, editTodo, updateTodo, removeTodo } = this.properties;
		const todoItems = arrayFrom(todos.entries()).filter(([ , value ]) => filter(activeFilter, value));

		return v('ul', { classes: this.theme(css.todoList) }, todoItems.map(([ key, todo ]) => {
			return w(TodoItem, { key, todo, toggleTodo, editTodo, removeTodo, updateTodo });
		}));
	}
}

export const TodoListOutlet = Outlet(TodoList, 'filter', { mapParams: mapFilterRouteParam });

开发者ID:agubler，项目名称:examples，代码行数:30，代码来源:TodoList.ts

示例6: Outlet

import { Outlet } from '@dojo/routing/Outlet';
import { MapParamsOptions } from '@dojo/routing/interfaces';

import { TodoDetailsContainer } from './../containers/TodoDetailsContainer';

export const TodoDetailsOutlet = Outlet(TodoDetailsContainer, 'edit', { mapParams: ({ params, router }) => {
	return {
		id: params.id,
		onRequestExit() {
			const link = router.link('view');
			link && router.setPath(link);
		}
	};
}});

开发者ID:dylans，项目名称:examples，代码行数:14，代码来源:TodoDetailsOutlet.ts

示例7: Outlet

import { Outlet } from '@dojo/routing/Outlet';

export const LoginOutlet = Outlet('login', 'login');

开发者ID:agubler，项目名称:examples，代码行数:3，代码来源:LoginOutlet.ts

示例8: Registry

import { Registry } from '@dojo/widget-core/Registry';

import TodoHeader from './widgets/TodoHeader';
import TodoList from './widgets/TodoList';
import TodoFooter from './widgets/TodoFooter';
import TodoFilter from './widgets/TodoFilter';
import TodoItem from './widgets/TodoItem';

const registry = new Registry();

function mapFilterRouteParam({ params }: any) {
	return { activeFilter: params.filter };
}

registry.define('todo-header', TodoHeader);
registry.define('todo-list', Outlet(TodoList, 'filter', { mapParams: mapFilterRouteParam }));
registry.define('todo-item', TodoItem);
registry.define('todo-footer', TodoFooter);
registry.define('todo-filter', Outlet(TodoFilter, 'filter', { mapParams: mapFilterRouteParam }));

const root = document.querySelector('my-app') || undefined;

const Projector = ProjectorMixin(TodoApp);
const projector = new Projector();

const router = registerRouterInjector([
	{
		path: 'filter/{filter}',
		outlet: 'filter',
		defaultParams: { filter: 'all' },
		defaultRoute: true

开发者ID:dylans，项目名称:examples，代码行数:31，代码来源:main.ts

示例9: Outlet

import { Outlet } from '@dojo/routing/Outlet';
import { MapParamsOptions } from '@dojo/routing/interfaces';

import { TodoFooter } from './../widgets/TodoFooter';

export const TodoFooterOutlet = Outlet(TodoFooter, 'view', { mapParams: ({ queryParams, params }) => {
	return { view: params.view, filter: queryParams.filter };
}});

开发者ID:dylans，项目名称:examples，代码行数:8，代码来源:TodoFooterOutlet.ts

示例10: Outlet

import { Outlet } from '@dojo/routing/Outlet';
import { MapParamsOptions } from '@dojo/routing/interfaces';

import { TodoFooter } from './../widgets/TodoFooter';

export const TodoFooterOutlet = Outlet(TodoFooter, 'filter', { mapParams: ({ params }: MapParamsOptions) => {
	return { filter: params.filter };
}});

export default TodoFooterOutlet;

开发者ID:agubler，项目名称:examples，代码行数:10，代码来源:TodoFooterOutlet.ts

注：本文中的@dojo/routing/Outlet.Outlet函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。