ducks.mustache revision c6d4c11c9b36a9645bee58eb43cbf7c674e2028c
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<div class="intro">
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff <p>This example demonstrates how to use a NodeList instance to work with multiple nodes.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<div class="example">
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff{{>ducks-source}}
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<h2>Setting up the Node</h2>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>First we need some HTML to work with.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff{{>ducks-simple-html}}
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>CSS to make boxes in horizontal row</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff{{>ducks-simple-css}}
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<div class="example">
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff{{>ducks-simple-source}}
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<h2>Geting a NodeList Instance</h2>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>We will use the `all` method of our YUI instance to get a NodeList instance to work with.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffvar boxes = Y.all('.box-row li');
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<h2>Accessing NodeList Properties</h2>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>As with Node, simple type of properties (strings, numbers, booleans)
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffpass directly to/from the underlying HTMLElement, however properties
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffrepresenting HTMLElements return Node instances.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>In this example, we will listen for a `click` event to trigger the property change.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>Note that the context of the handler is set to the NodeList, so `this`
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffrefers to our NodeList instance. The `currentTarget` property of
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffthe event object is set to the current Node instance.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffvar handleBoxClick = function(e) {
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff // this === boxes, which is a NodeList
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff this.setStyle('backgroundColor', '#F4E6B8');
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff // e.currentTarget === .box-row li, just the one that was clicked
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff e.currentTarget.setStyle('backgroundColor', '#fff');
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniffboxes.on('click', handleBoxClick);
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<h2>Prefer `node.delegate()` over `nodelist.on()`</h2>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<p>Sometimes you need to create individual subscriptions for each Node in a
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff ConniffNodeList (as is done in this example), but usually it's preferable to use
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<a href="node-evt-delegation.html">event delegation</a>.</p>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<h2>Complete Simple Box Example Source</h2>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff{{>ducks-simple-source}}
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff<h2>Complete Ducks Example Source</h2>
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff ConniffThis example uses <a href="node-evt-delegation.html">event delegation</a>.
c6d4c11c9b36a9645bee58eb43cbf7c674e2028cJeff Conniff{{>ducks-source}}