使用资源模板

资源模板可以通过resource中间件传递给任何具有使用resources中间件公开的资源属性的小部件。

MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

import MyResourceAwareWidget from './MyResourceAwareWidget';

const resource = createResourceMiddleware();
const factory = create({ resource });

interface MyResourceType {
	value: string;
}

const template = createResourceTemplate<MyResourceType>({
	read: (request, controls) => {
		// use the request to get the required data
		// use the controls to populate the resource
	}
});

export factory(function MyWidget({ middleware: { resource }}) {
	return (
		<div>
			<MyResourceAwareWidget resource={resource({ template })}>
		</div>
	);
});

传递初始化选项

初始化选项可以与使用createResourceTemplate工厂创建的任何模板一起传递，并传递给模板的init函数以初始化资源。initOptions包含一个用于标识后备资源的id，以及可选的data，可以在创建时添加到资源中。

MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

import MyResourceAwareWidget from './MyResourceAwareWidget';

const resource = createResourceMiddleware();
const factory = create({ resource });

interface MyResourceType {
	value: string;
}

const template = createResourceTemplate<MyResourceType>({
	read: (request, controls) => {
		// use the request to get the required data
		// use the controls to populate the resource
	}
});

export factory(function MyWidget({ id, middleware: { resource }}) {
	return (
		<div>
			<MyResourceAwareWidget resource={resource({ template, initOptions: { id, data: [{ value: 'foo'}, { value: 'bar'}] } } )}>
		</div>
	);
});

转换数据

当一个小部件被配置为使用resources中间件，其数据接口不同于模板时，需要一个“转换”描述符。transform是一个对象，其键是resources中间件类型的键，映射到资源模板类型的键。

MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceTemplate, createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

import MyResourceAwareWidget from './MyResourceAwareWidget';

const resource = createResourceMiddleware();
const factory = create({ resource });

interface MyResourceType {
	custom: string;
}

const template = createResourceTemplate<MyResourceType>({
	read: (request, controls) => {
		// use the request to get the required data
		// use the controls to populate the resource
	}
});

export factory(function MyWidget({ id, middleware: { resource }}) {
	return (
		<div>
			<MyResourceAwareWidget resource={resource({ template, transform: { value: 'custom' }, initOptions: { id, data: [{ custom: 'foo'}, { custom: 'bar'}] } })} />
		</div>
	);
});