Ember 2.x get model's relationships at subroute of that model

Imagine that I have two models, Author and Book.

// models/author.js
DS.Model.extend({
  name: DS.attr(),
  books: DS.hasMany('book')
});


// models/book.js
DS.Model.extend({
  title: DS.attr(),
  author: DS.belongsTo('author')
})

It would be nice to have an endpoint at /api/authors/{authorID}/books to be able to get all of the authors books in one batch request, instead of making multiple calls to /api/books/{bookID}, but it doesn't seem that ember supports this. It is possible to do /api/books?authorID={authorID}, but that would lose some of the benefits of the store.

Is there an Ember idiomatic way of doing /api/authors/{authorID}/books? Again, the goal is to be able to make one batch request to get all books for an author instead of making one call for every book in the author's hasMany list.

For a little more context, I have the following routes structure:

// router.js
...
this.route('authors', function() {
  this.route('author', { path: ':id' }, function() {
    this.route('books');
  });
});
...

In the 'authors' route I will load all of the authors. I do not want to synchronously load their related books, yet, as the list is potentially massive and not used on this route.

In the author route I'm using data of the author already retrieved (the name, in this case).

In the books route I would like to finally load all of the author's related books without needing to send a single request per book.

Create multiple arrays from one set

I have an array of items, each have an item_type property that could be one of four different types (this is a cart of items). When I attempt to "pay" for the items in the cart, I need to separate all the items remaining into arrays of each item type to send back to the server so the proper tables can be updated. I was just going to use a map to do this but that would require multiple passes (at least the way I was thinking I needed to do it) but is there a quicker way to take one array and split it into multiple arrays based on a property?

Specifically I need to know which array is which (which one has raffle tickets, donations, etc.) so I can post them to the server with the correct property name so the server knows what array is what and how to proceed with each.

Currently in ember this is how I am working through this. Not a lot of code but still I wonder if there is some refactoring that can be done here

// ARRAYS OF CLASSES
itemsArray: Ember.computed.filterBy('model.items','item_type','bid'),
donationsArray: Ember.computed.filterBy('model.items','item_type','donation'),
ticketsArray: Ember.computed.filterBy('model.items','item_type','ticket'),
rafflesArray: Ember.computed.filterBy('model.items','item_type','raffle'),

// ARRAYS OF JUST CLASS IDS
itemIds: Ember.computed.mapBy('itemsArray','id'),
donationIds: Ember.computed.mapBy('donationsArray','id'),
ticketIds: Ember.computed.mapBy('ticketsArray','id'),
raffleIds: Ember.computed.mapBy('rafflesArray','id'),

Changing the view of a div created by loop without re-running the loop in ember.js

How can I change the view of a created by a loop which observes a change in its attribute , without changing the view of other created by the loop .

I am looping an array variable to display a set of list in each div .

{{#each val in property1}}

    <div class="grid1">
       {{val.value}}
     </div>
{{/each}}

Suppose my property1 looks like this

  property1:function(){
   array1 = [{
      value:'person1',
      address:'place1' 
  },
   {
      value:'person2',
      address:'place2' 
  }] 
 return array1;
}.property('flagValue')

Now the on changing the flagValue , property1 is called again and the DOM also gets updated. HOW CAN I OBSERVE THE address of a particular index in array1 object and change the view of the associated to that index without re-running the whole loop again.

Ember .get doesn't return correct value

So i have this ember object "lineup", when i use

lineup.get('stations').length = 396

but it is wrong, if i inspect that object, and use _data

lineup._data.length = 429

it is the correct one,

Lineup stations is got from ember-data request payload manipulation like this

if (payload.stations) {
     payload.stations = payload.stations.map(function(s) {
         s.logo = s.logoFilename ? 'http://ift.tt/1NxbTCC'+s.logoFilename : null;
         delete s.logoFilename;
         return Ember.Object.create(s);
      });
}

any ideas?

How do I render multiple outlets in one template file using ember 2.3

I'm trying to render multiple .hbs snippets into their respective outlets. However, the following renderTemplate does not work:

renderTemplate: function() {
     // default behavior, renders the home template
     this.render(); 
      this.render('hero', {    // render the `hero` template
       outlet: 'hero'  // using the outlet named `hero`
     });
   }, 

The template file in question looks like this:

{{outlet 'hero'}}
{{outlet}}

This actually renders the default template (this is the index route) twice: once in the hero outlet, and once in the regular outlet.

This seemed to work in ember1.7, even if the hero outlet was included in the application.hbs template. Not quite so with ember2.3.

How would I make this work?

how to get session data created by auth0 in ember 2.3

I am using ember 2.3 (and ember-data 2.3); I'm setting up a simple user auth process using Auth0. Nothing fancy yet, just installed auth0 according to :

http://ift.tt/1OLRvl4

Now, my setup is pretty much exactly the same as the project given here. However, it seems that I can only access the session from application.hbs and not any other template. Or route. Or anything else.

So this handlebars snippet:

{{#if session.isAuthenticated}}
  {{session.data.authenticated.profile.name}}
{{else}}
  NOPE
{{/if}}

works on application.hbs but nowhere else. This does not make sense to me; if auth0 itself says that session.data can be accessed from any template, and that such a handlebars snippet even exists, there must be something I'm missing. I need to be able to show certain portions of the client side as well as restrict some actions based on the currently signed-in user (and whether someone is actually signed in ), all of which are included in the session.data object.

It doesn't seem appropriate to pass this object to every component I'm going to create, and the only way I can think of getting this data right now is to manually get it from localStorage. I could perhaps make this manual process a mixin and have it included everywhere but before I try to find roundabout solutions, I want to make sure that I'm not missing something in the implementation itself.

How would I be able to access the session token throughout the application aside from application.hbs itself?

Retrieve hasMany child records in route

I have the following route:

/projects/5/files

I read in the API that using find() and findAll() will automatically update any templates that use their results when records are pushed to the store. How can I do that with the child file records?

I currently have this in my projects/files.js route:

model() {
  return this.modelFor('project').get('attachments')
}

This works on first load but won't update when adding records to the store.