Search code examples
laravelember.jshandlebars.jsember-dataember-cli

Unable to access model store in template


Kind of out my wits end with this, I know I'm probably just missing something super obvious. Trying to get my head around working with Ember and Lavarel. Lavarel is properly sending the data over, but I don't seem to be able to access it once it gets stored. I've tried quite a few different things to get this working, but it always just appears blank as if there is nothing in model.car(or car, or model, ect..). If anyone could point me in the right direction, would be helpful. I've seen a few similar questions, but none seemed to resolve my problem.

Model Data

Data Sent from Lavarel

cars.js (route)

    import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.findAll('car');
    }
});

car.js (model)

import DS from 'ember-data';

export default DS.Model.extend({
  make: DS.attr('string'),
  model: DS.attr('string')
});

cars.js (controller)

import Ember from 'ember';

export default Ember.Controller.extend({
    session: Ember.inject.service()

});

application.js (serializer)

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
    normalizeSingleResponse(store, primaryModelClass, payload, id, requestType) {
    let typeKey = primaryModelClass.modelName;
    let ret = {};
    ret[typeKey] = payload;
    return this._normalizeResponse(store, primaryModelClass, ret, id, requestType, true);
},
normalizeArrayResponse(store, primaryModelClass, payload, id, requestType) {
    let typeKey = primaryModelClass.modelName;
    let ret = {};
    ret[typeKey] = payload;
    console.log(ret);
    return this._normalizeResponse(store, primaryModelClass, ret, id, requestType, false);
}
});

cars.hbs (template)

{{outlet}}
<ul id="todo-list">
        {{#each model.car}}
        <li>
            <input type="checkbox" class="toggle">
            <label>{{make}}</label><button class="destroy"> delete item</button>
        </li>
    {{/each}}

</ul>

Solution

  • You are right about everything if you got car model loaded into store. As you said you missed something super obvious. ie., Instead of model.car you can just access using model. For the next to debug this I would encourage you to use log helper like {{log 'model' model}} this will print model object in console. You can go through ember template development helper ember guide

    <ul id="todo-list">
            {{#each model as |car|}}
            <li>
                <input type="checkbox" class="toggle">
                <label>{{car.make}}</label><button class="destroy"> delete item</button>
            </li>
        {{/each}}
    </ul>
    {{outlet}}