我有一个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似乎引用了根(组件的父级),而不是组件的视图片段。
提前致谢
答案 0 :(得分:3)
ractive.find(querySelector)
正是您所寻找的:
Ractive.extend({
template : "#component_template",
show : function(){
this.find('.collapse').show();
},
hide : function(){
this.find('.collapse').hide();
}
})