Picture of Henrik Aabom
Re: Handlebars problems
by Henrik Aabom - Monday, 4 April 2016, 11:46 AM
 

Thanks Matt

Once again you have the answers to everything ;)

However, it didn't work for me to put in this.$el anywhere. But I found the solution by looking in the media component, as you suggested.

And you were right, the problem was that I didn't set the right scope.

The event hash did the trick! 

 

For anyone who might have a similar problem here is the working code:

From the .js code:

events: {
"click .btnShow": "showHide_text"
},

showHide_text: function(event){
var $moretext = this.$(".moreTxt");
var $lessText = this.$(".lessText");
var $button = this.$(".btnShow");

if ($moretext.hasClass("isOpen")) {
$moretext.hide(1000);
$lessText.show(1000);
$moretext.removeClass("isOpen");
}
else{
$moretext.show(1000);
$lessText.hide(1000);
$moretext.addClass("isOpen");
}
},

 

in the postRender: function() I still have:

$(".moreTxt").hide();

 

and from the .hbs-code:

<div class="text-inner component-inner" role="region" aria-label="{{_globals._components._text.ariaRegion}}">
{{> component this}}

<div class="moreTxt">
<p>{{{moreText}}}</p>
<button class="btnShow button" role="button">{{{lessText_btn}}}</button>
</div>

<div class="lessText">
<button class="btnShow button" role="button">{{{moreText_btn}}}</button>
</div>

</div>