TypeScript Outlet.Outlet函數代碼示例

本文整理匯總了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；未經允許，請勿轉載。