How to hide a view in ember.js?

by herminia_bruen , in category: Javascript , 4 months ago

How to hide a view in ember.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by scotty_walker , 4 months ago

@herminia_bruen 

In Ember.js, you can hide a view by using the isVisible attribute. The isVisible attribute can be set to false to hide the view and true to show the view.


Here is an example of how to hide a view in Ember.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// app/components/my-component.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyComponentComponent extends Component {
  isVisible = true;

  @action
  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

// app/templates/components/my-component.hbs
<button {{on "click" this.toggleVisibility}}>Toggle Visibility</button>

{{#if this.isVisible}}
  <div>This is a visible view</div>
{{/if}}


In this example, the isVisible attribute is initially set to true, so the view will be visible. When the toggleVisibility action is triggered by clicking the button, the isVisible attribute will be toggled between true and false, hiding or showing the view accordingly.