Ractive component: как получить ссылку на DOM?

Question

У меня есть активный компонент, который включает в свой шаблон html элемент Bootstrap .collapse. Вызов show() и hide() на этом вызовет запуск Bootstrap и скрыть переходы.

# 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? 
    } 
}) 

Как я могу получить ссылку в javascript для элемента collapse? this.el, похоже, относится к корню (родительский компонент), а не к фрагменту представления компонента.

заранее спасибо

Answer 1

ractive.find(querySelector) является то, что вы ищете:

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