wire dojo dijit

wire/dojo/dijit

The wire/dojo/dijit plugin provides integration with Dijit. It provides automatic lifecycle management for Dijits created using wire.js (see below for more information), a placeAt facet for placing wire.js-created Dijits into the page, and a reference resolver, similar to dijit.byId for referencing Dijits created in the HTML page the dojoType and data-dojo-type HTML attributes.

This plugin also ensures that dependencies are injected into Dijit-based components using dijit._Widget's set() method, so that your property setters (e.g. _setMyPropAttr) are invoked.

Options

{
	module: 'wire/dojo/dijit'

	// theme
	// Set the current dijit theme for the page
	// This will load the CSS and set the appropriate theme class on
	// the body element
	theme: 'claro'
}

Dijit Themes

The wire/dojo/dijit plugin can load and activate any of Dijit's builtin themes. Simply set the theme option to the name of the theme.

Example

{
	module: 'wire/dojo/dijit'

	// Set the current dijit theme to claro
	// This will load the CSS and set the appropriate theme class on
	// the body element
	theme: 'claro'
}

Note: wire.js relies on an AMD css! plugin, such as the css! plugin from curl.js, to load css.

Dijit Lifecycle Management

Since Dijits are, at their most basic level, Javascript constructors, they can be created easily using create.

The plugin also supports dijit._Widget's setter infrastructure. When you set properties and inject dependencies into a Dijit, they will be set/injected using set(), and thus will invoke custom setters, e.g. setMyPropAttr().

While dojo automatically destroys Dijits created using the dojoType and data-dojo-type HTML attributes, it does not automatically destroy programmatically created Dijits, which includes those created via wire.js create.

The wire/dojo/dijit plugin will track all Dijits created in each context, and when the a context is destroyed, all the Dijits created in that context will also be destroyed, using dijit._Widget.destroyRecursive() or dijit._Widget.destroy().

So, any Dijit-based components you create using wire.js will be automatically cleaned up when the context in which they were created is destroyed.

Example: create Dijit

{
	plugins: [
		{
			module: 'wire/dojo/dijit'
		}
	],
	
	// Create a Dijit
	// Let's say my/View is a "subclass" of dijit/_Widget
	// Think of this as similar to
	// new MyView({}, document.getElementById('my-view-node-id'))
	myView: {
		create: 'my/View',
		args: [{}, { $ref: 'dom!my-view-node-id' }]
	},
	// Inject some other properties
	// NOTE: These will invoke set()!  Yay!
	properties: {
		title: 'Cool stuff',
		count: 10
	}
}

dijit! References

Syntax

The following is a reference to the Dijit whose id is my-dijit-id. This is equivalent to dijit.byId('my-dijit-id').

{ $ref: 'dijit!my-dijit-id' }

Examples

{
	plugins: [
		{
			module: 'wire/dojo/dijit'
		}
	],
	
	// Create a controller
	myComponent: {
		create: 'my/Component', // shortcut "create" syntax
		properties: {
			// Inject a reference to the Dijit whose id is 'my-dijit-id'
			myDijit: { $ref: 'dijit!my-dijit-id' }
		}
	}
}

placeAt

The placeAt feature allows you to use place Dijits created using wire.js into the DOM, just like using dijit/_Widget.placeAt().

Examples

{
	plugins: [
		{
			module: 'wire/dojo/dijit'
		}
	],
	
	// Create a Dijit
	// Let's say my/View is a "subclass" of dijit/_Widget
	// Think of this as similar to
	// new MyView({})
	// NOTE: No node passed to the constructor
	myView: {
		create: 'my/View',
		args: [{}]
	},
	// Inject some other properties
	// NOTE: These will invoke set()!  Yay!
	properties: {
		title: 'Cool stuff',
		count: 10
	},
	// Place the dijit into the DOM
	// Think of this as
	// myView.placeAt(dojo.byId('my-view-node-id', 'last'))
	placeAt: [{ $ref: 'dom!my-view-node-id' }, 'last']
}