TypeScript Outlet.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 });

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

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

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

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

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;

}

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 });

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);
		}
	};
}});

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

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

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

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 };
}});

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;