CODEWITHSUNDEEP
ember.jscontrollerember-data
Josh Padnick
Josh Padnick

Reputation: 3268

The Ember Way for Setting a Controller Property Based on this.store.find()

I am setting up a page where my user can add an orgLanguage, and I'd like to show a special message if this is the first orgLanguage being added. I'm able to get my code working, but it sure looks ugly, and I'm wondering if there's a better way to handle this?

First, here's my Handelbars template:

Handlebars Template (Simplified):

{{#if isFirstOrgLanguage}}
...display some content
{{/if}}

That variable is defined on my controller as follows.

Controller (Simplified):

export default  Ember.ObjectController.extend({

    isFirstOrgLanguage: function() {
        // the 'orgLanguages' controller property is set in the route
        var orgLanguagesPromiseArray = this.get('orgLanguages');

        return orgLanguagesPromiseArray.then( function() {
            var orgLanguagesRecordArray = orgLanguagesPromiseArray.get('content');
            var orgLanguagesArray = orgLanguagesRecordArray.get('content');
            return orgLanguagesArray ? orgLanguagesArray.length === 1 : true;
        });
    }.property('orgLanguages')

}

I've named my variables the data type that I receive. You'll note that this is a computed property that depends on a controller property set on my route, shown below.

Route (Simplified):

setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('orgLanguages', this.store.find('org-language') );
},

Finally, I'd like to call some basic jQuery on this Handlebars template if isFirstOrgLanguage is true, so I set up my view as follows.

View:

export default Ember.View.extend({

    didInsertElement: function() {
        this.get('controller').get('isFirstOrgLanguage').then( function( isFirstOrgLanguage ) {
            console.log('isFirstOrgLanguage', isFirstOrgLanguage);
        });
    }

});

This seems like a crazy amount of promises and async management just to answer the question "is there exactly 1 orgLanguage defined"? Although the above works, is there a simpler way, or perhaps "The Ember Way" to do this?

Update: In doing some additional research, it seems this has been a topic for some debate. Here are relevant discussions I've seen on this. If I settle on a pattern I like, I'll post it as as an answer, but would welcome other suggestions.

Upvotes: 1

Views: 2473

Answers (1)

Josh Padnick
Josh Padnick

Reputation: 3268

I wanted to post how I eventually solved this.

First, it became clear that there are recommended solutions to this pattern, but no "one true way". See http://discuss.emberjs.com/t/the-right-way-to-load-additional-models-to-build-filtering-checkboxes/4966/4.

What I wound up using was this:

Route:

...
afterModel: function() {
  var _this = this;

  Ember.RSVP.hash({
      languages: this.store.find('language'),
      orgLanguages: this.store.find('org-language')
  }).then( function( hash ) {
      _this.set('controller.languages', hash.languages );
      _this.set('controller.orgLanguages', hash.orgLanguages );
  });
},
...

The key insights here are:

  1. This is done after the page's model loads. This may or may not make sense depending on your context.
  2. Some people like to wrap each model in its own controller, but I didn't have clean mappings to controllers like that, so I directly set these property values.
  3. It's generally bad practice to set computed properties that are promises, so if you have to deal with promises (which with any use of this.store.find() you do, then it's best to resolve the promise in the route and then pass the "concrete" property to your controller. But keep in mind that your template will be rendering these values when they eventually resolve! So, again there is some room for debate.

I think the general takeaway is that Ember is giving you lots of options to get this done, with plenty of possibilities to use depending on your needs.

Upvotes: 2

Related Questions