Ractive component: how to get a reference for its DOM?

Question

I have a Ractive component that includes within its template html a Bootstrap .collapse element. Calling show() and hide() on this will trigger Bootstrap show and hide transitions.

# the component template:
  <div id='my_component>
    <div class='collapse'>
        some stuff to show or hide in here
    </div>
  </div>


# the component code:

Ractive.extend({
  template : "#component_template",
  show : function(){
    // call show() on the .collapse element within the rendered template
    // but how to get a reference on that element?
  },
  hide : function(){
    // call hide() on the .collapse element within the rendered template
    // but how to get a reference on that element?
  }
})

How can I get a reference in the javascript to the collapse element? this.el seems to refer to the root (component's parent) and not the component's view fragment.

thanks in advance

Answer 1

ractive.find(querySelector) is what you're looking for:

Ractive.extend({
  template : "#component_template",
  show : function(){
    this.find('.collapse').show();
  },
  hide : function(){
    this.find('.collapse').hide();
  }
})