Referencing DOM nodes on demand

[jcfranco]

What's the recommended approach to referencing DOM nodes on demand (akin to refs in React)?

In this toy snippet (codepen here), the node of interest is stored whenever it is created and referenced afterwards.

var shared = { node: null };

function focusNode() {
  shared.node.focus();
}  

function storeNode(node) {
  shared.node = node;
}

var form = {
  renderMaquette: function() {
    return h('div', [
      h('textarea', { afterCreate: storeNode }),
      h('button', { onclick: focusNode }, 'focus')
    ]);
  }
};

Is this a reasonable pattern or is there a better way?

[RickHoving]

That is the way we do things :)
Also note that in most events like the onclick you also can access the DOM nodes.
This is useful when you want to access that particular node, but I think its not useful in your particular example.

[jcfranco]

Thanks for the info! It may be worth adding an entry about node-reference patterns to the cookbook.