CODEWITHSUNDEEP
ember.js
awwester
awwester

Reputation: 10172

Ember filter store by current user

I'm a little bit lost and struggling to find the correct information to guide me. I have an application for selling coffee, and when the user logs in, I'd like to filter data they see to the STORE that they're apart of.

(I'm going to capitalize STORE when talking about the coffee store object, to help with confusion in relation to the ember data store)

export default DS.Model.extend({
  user: DS.belongsTo('user'),
  active: DS.attr('boolean'),
  name: DS.attr('string'),
  extraShotPrice: DS.attr('number'),
  syrupPrice: DS.attr('number'),
});

Here is my STORE model, and it's linked to the user in a simple belongsTo relationship.

On my backend, I have an endpoint that returns the current user object properly, but I'm a little lost at how/where I can properly load that user into my store and then use it in a controller.

The second thing I will need to do is filter my model in a route to that user. 

export default Ember.Route.extend({
  model: function(){
    // not sure where user.id would come from?
    return this.store.find('store', {'user': user.id})
  }
});

Right now I'm just hardcoding the model because I've been stuck on this for a while, and everything works as expected with the hardcoded value.

By the way, STORE and user have a 1-to-1 relationship. Thanks for any suggestions!

Upvotes: 0

Views: 119

Answers (2)

Kori John Roys
Kori John Roys

Reputation: 2661

A service can be a good choice for a long-lived object in Ember (such as a current_user in many applications. It's actually surprisingly simple and I don't know why it's not discussed more:

services/session_service.js

export default Ember.Service.extend({
  currentUser: Ember.computed(function() {
    // however you fetch the user
    // I will just use some dummy data
    return Ember.Object.create({
      name: "Kori",
      workTitle: "Mr. Big Boss",
      skills: ["Ember", "Mentoring", "Ruby", "Refactoring"]
    });
  })
});

controllers/some_controller.js

export default Ember.Controller.extend({
  session: Ember.inject.service(),
  currentUser: Ember.computed.alias("session.currentUser")
});

usage in a template:

<h2>User details:</h2>
<p>Title: ({{currentUser.workTitle}})</p>
<p>Name: {{currentUser.name}}</p>
<p>Mad Skills:</p>
<ul>
  {{#each currentUser.skills as |skill|}}
    <li>
      {{skill}}
    </li>
  {{/each}}
</ul>

In your specific case you might end up with your route looking like this:

export default Ember.Route.extend({
  session: Ember.inject.service(),
  model: function(){
    return this.store.find('store', {'user': this.get('session.currentUser.id')})
  }
});

then your OCD kicks in:

export default Ember.Route.extend({
  session: Ember.inject.service(),
  currentUserId: Ember.computed.alias('session.currentUser.id'),
  model: function(){
    return this.store.find('store', { 'user': this.get('currentUserId') })
  }
});

P.S. store as a model name == no end of fun!

Sample codepen

Upvotes: 2

pixelearth
pixelearth

Reputation: 14630

It looks like you really want to have some kind of session in your Ember app, that coordinates with your back end. You probably don't want to contact the server for that on every transition. Have you looked into Simple Auth?

Upvotes: 0

Related Questions