Ractive组件:如何获取其DOM的引用?

时间:2015-09-01 04:46:14

标签: ractivejs

我有一个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中获取对collapse元素的引用? this.el似乎引用了根(组件的父级),而不是组件的视图片段。

提前致谢

1 个答案:

答案 0 :(得分:3)

ractive.find(querySelector)正是您所寻找的:

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