wire jquery dom

wire/jquery/dom

The wire/jquery/dom plugin provides integration with jQuery's DOM selection engine. It provides a reference resolver for querying DOM nodes that makes it easy to inject DOM nodes or lists of DOM nodes into your components. While the wire/dom plugin provides simple id-based DOM node injection, wire/jquery/dom allows full DOM querying, basically anything supported by jQuery.

Options

{
	module: 'wire/jquery/dom'

	// Easy!  There are no options, just include the plugin.
}

dom.query! References

Syntax

The following is a reference to a list of DOM nodes with the class "my-class", using wire's standard JSON-reference-like syntax:

{ $ref: 'dom.query!.my-class' }

You can extract a single node by index from the query results. For example, the following is a reference to the first DOM node with the class "my-class"

{ $ref: 'dom.query!.my-class', i: 0 }

Examples

Here is an example of a wire spec that creates a simple view component (using the builtin create syntax, and supplies a DOM node to the view's constructor.

{
	plugins: [
		{
			module: 'wire/jquery/dom'
		}
	],

	// Create a view component, calling its constructor with a single arg,
	// the first DOM Node returned by a query for nodes with the class
	// 'myview-class'.
	// Think of this as similar to
	// new MyView($('.myview-class')[0])
	myView: {
		create: {
			module: 'my/View',
			// Array of Constructor args.  In this case, the DOM node
			// as the only argument.
			args: [{ $ref: 'dom.query!.myview-class', i: 0 }]
		}
	}
}