Load content into a dropdown on click

1

Hello,

Let’s say I need a custom dropdown list that I want to populate with data once the user expands it. My current idea is to have properties in the controller like expanded " and contentLoaded. When user clicks the dropdown I would set expanded to true. I would have a listener for the change of this property where I would load the data and set contentLoaded to true so I don’t have to reload it next time.

Is there a more emberish way of doing this?

1 Like
2

Yes, you should probably use a computed property instead of an observer on expanded. A computed property won’t be computed before it’s requested.

Example JavaScript:

App.SomeController = Ember.Controller.extend({
  isExpanded: false,
  expand: function() {
    this.set('isExpanded', true);
  },
  records: function() {
    return App.Record.find();
  }.property()
});

Example Handlebars:

<a {{action expand}}>Expand</a>
{{#if isExpanded}}
  {{#each record in records}}
    {{record.name}}<br>
  {{/each}}
{{/if}}

This way, the records property won’t be requested before isExpanded is set to true.

2 Likes
3

Thanks a lot for this!