References

References allow you to reference components and other existing resources. Wire.js uses a JSON-referencing-like syntax for references, but allows for extensions to the referencing syntax via plugins, which can provide Reference Resolvers to do more sophisticated things, such as referencing DOM nodes.

Syntax

In their most simple form, references are a Javascript object with a single property $ref. For example, the following reference refers to a component in the current context (or any of its ancestors) whose name is myComponent.

{ $ref: 'myComponent' }

When using plugin reference resolvers, the syntax is similar to AMD loader plugin syntax:

{ $ref: 'resolver!reference-identifier' }

For example, the wire/dom plugin provides a reference resolver for referencing DOM nodes by id by providing a reference resolver named dom, whose reference identifier is a DOM node id.

{ $ref: 'dom!my-node-id' }

Simple Example

Using references in a wire spec is similar to using variables. For example, if you have a component named controller needs a reference to another component named view:

// Create a controller instance
controller: {
	create: 'my/Controller',
	
	// Set controller properties
	properties: {
		// Set the controller's myView property to the view
		// instance created below
		myView: { $ref: 'view' }
		// ... other controller properties
	}
	// ... other controller configuration
},

// Create a view instance
view: {
	create: 'my/View',
	// ... other view configuration
}

Notice that order doesn't matter. Even though view is referenced before it is declared, the reference will be resolved correctly because wire specs are declarative, and wire.js will handle ordering to make sure everything works out.

Reference Resolver Plugins

More coming soon