Setting state and listeners on children elements

[danielepolencic]

Consider the following snippet taken from the tests:

    var Child = hyperd.Component.extend({
      constructor: function() {
        hyperd.Component.apply(this, arguments);
        this.data.count = 0;
      },
      render: function() {
        return '<div>' + this.data.count + '</div>';
      },
      onRender: function() {
        expect(this.node.innerHTML).to.be('' + this.data.count);
        this.data.count++;
        if (this.data.count > 5) {
          parent.destroy();
          done();
        }
      }
    });
    var Parent = hyperd.Component.extend({
      components: {
        child: Child
      },
      render: function() {
        return '<div><child/></div>';
      }
    });
    var parent = new Parent().attachTo(this.node);

I'd like to attach a listener to the Child like this:

child.on('click', 'div', console.log.bind(console));

is there any way to reference the instance child from within the Parent?

The same is valid if I want to reference the state within the child:

child.data.foo = 'bar';

At the moment, child is instantiated automatically by Parent and never exposed the outside world. That means that I'm not able to reference any of the methods on that instance (e.g. state, listeners, etc.). I was thinking perhaps component.components could hold a reference to a children already instantiated, rather than class? In this way we could manipulate the new instance like below:

let Child = hyperd.Component.extend({...})

let child = new Child();

let Parent = hyperd.Component.extend({
  components: {child: child},
  ...
})

[...]

child.data.foo = bar;
child.on('click', '*', console.log.bind(console));

Thoughts?

[nkzawa]

Unfortunately, there is no way to get instances of child components for now, but if you'd like to just add a listener you can do that like the following:

// first, add id or class name to the child .
var Child = hyperd.Component.extend({
    render: function() {
        return '<div id="child">' + this.data.count + '</div>';
    }
})

// listen an event of the child in the parent component.
this.on('click', '#child', console.log.bind(console));

Otherwise, we should add a new feature to get references of child components, maybe something like:

// add a special attribute to the node
      render: function() {
        return '<div><child data-ref="child1"/></div>';
      }

// access to the reference
this.refs.child1.data.foo = bar;

component.components requires classes of components because any number of child components can be dynamically instantiated.

[nkzawa]

Additionally, you can set properties of child components instead of data when rendering, so I think you don't need to access these instances in most cases.

// parent
render: function() {
   // instead of child.data.foo = bar;
   return '<div><child foo=" + bar + "/></div>'
}

[...]

// child
render: function() {
   return '<div>foo:' + this.props.foo + '</div>'
}