Ractive 组件：如何获取其 DOM 的引用？

Question

我有一个 Ractive 组件，其模板 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 中获取对折叠元素的引用？ this.el 似乎指的是根（组件的父级）而不是组件的视图片段。

提前致谢

Answer 1

ractive.find(querySelector) 是您要查找的内容：

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

Ractive 组件：如何获取其 DOM 的引用？

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

ractivejs