CODEWITHSUNDEEP
ember.jsmodel
PCR
PCR

Reputation: 275

ember - loading model data in route for power sort?

I have a very simple set up right now. I have a book model that has a name and author. I'm trying to create a simple form that will create a new book. For the author I'm using power select to load the authors from the author model. The form set up looks like this:

<form {{action "save" on="submit"}}>
    {{input value=model.title placeholder="Title"}}<br>

    {{#power-select class="select"
        selected=model.author
        options=authors
        onchange=(action (mut model.author)) as |author|}}
        {{author.name}}
    {{/power-select}}

    <input type="submit" value="Save">
</form>

However I'm having trouble setting up the route to get this working. So far no authors show up in the select, even though there are authors stored in my database. My route looks like this:

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.createRecord('book');
    },
    actions: {
        save() {
            this.modelFor(this.routeName).save();
        }
    },

    store: Ember.inject.service(),
    authors: Ember.computed({
        get() {
            return this.get('store').findAll('author');
        }
    }).readOnly()
});

First of all, how should I properly load data from the author model in the route for the books/new route? Secondly, should I be doing this in the route? From what I have read, and what people have told me, loading model data should be done in the route.

Upvotes: 0

Views: 70

Answers (2)

Ember Freak
Ember Freak

Reputation: 12872

1) Using Ember.RSVP.hash inside route model hook

your route file-> I assume books/new.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return Ember.RSVP.hash({
            newBook : this.store.createRecord('book'),
            authors : this.store.findAll('author')          
        });
    },
    actions: {
        save() {
            this.modelFor(this.routeName).newBook.save(); 
        }
    }    
});

and inside template you can access authors by using model.authors. and title by using model.newBook.title

<form {{action "save" on="submit"}}>
    {{input value=model.newBook.title placeholder="Title"}}<br>

    {{#power-select class="select"
        selected=model.newBook.author
        options=model.authors
        onchange=(action (mut model.newBook.author)) as |author|}}
        {{author.name}}
    {{/power-select}}

    <input type="submit" value="Save">
</form>

2) Like ebrahim suggested, you can have the below code in required controller,

authors: Ember.computed(function(){
           return this.store.findAll('author');        
})

3)As author model data is going to be shared data model for authors,books,books.new routes. so you can keep it in service and access it from all the required routes.

authors-service.js -> In service

import Ember from 'ember';

export default Ember.Service.extend({
  store:Ember.inject.service(),
  authors: undefined,
  init(){
   this._super(...arguments);
   this.get('store').findAll('author', { reload: true }).then(function(results){
        this.set('authors',results); //As this is going to be  Ember.enumerables, you can iterate and get the data.
    });
 }
});

You can access authors from authors-service.js in any where by injecting it authorsService:Ember.inject.service(). I guess in your case, you need to create controller books/new.js for books/new.hbs template,

books/new.js -> controller file

import Ember from 'ember';

export default Ember.Controller.extend({  
  authorsService:Ember.inject.service(),
  authors: Ember.computed.alias('authorsService.authors');
});

Inside books/new.hbs template you can access authors property.

Upvotes: 0

Ebrahim Pasbani
Ebrahim Pasbani

Reputation: 9406

Move authors property to corresponding controller.

Also you don't need to add readonly.

So in controller :

  authors: Ember.computed(function(){
                return this.get('store').findAll('author');        
})

And for loading model in route. Yes you should load that model which is to be a resource manipulating, in route. So now you're doing it right.

Upvotes: 0

Related Questions