Ember: can't display my data

Question

I can't understand why I cannot visualize my data. If I check with the google app and in the console (App.model.store) they are there but whenever I try to insert them in Handlebars, nothing happen. the more confusing thing is that no error is display.

I prepared a simplify version of my app to post here:

<script type="text/x-handlebars" data-template-name="index">
  <header>
    <ul>
        <li>{{#linkTo "cal"}} Home {{/linkTo}}</li>
        <li>{{#linkTo "location"}} location {{/linkTo}}</li>
    </ul>
</header>
<section class="content">

    {{outlet}}

</div>
</script>

<script type="text/x-handlebars" data-template-name="cal">
  <div class="calendar">
      Hello!!!
    <h2>{{name}}</h2>
  </div>
</script> 

window.WebCalendar = Ember.Application.create();

WebCalendar.ApplicationAdapter = DS.FixtureAdapter.extend();

WebCalendar.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

/////// ROUTER
WebCalendar.Router.map(function() {
    this.resource('index', {path: '/'}, function() {
        this.resource("cal", {path: '/'});
        this.resource("location", {path: '/location'});
    });
});



WebCalendar.CalRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('cal').toArray();
    }
});


////// Model
WebCalendar.Cal = DS.Model.extend({
    name: DS.attr('string'),
    days_label: DS.attr('string'),
    months_label: DS.attr('string'),
    days_per_month: DS.attr('number'),
    current_date: DS.attr('date')

});


WebCalendar.Cal.FIXTURES = [
    {   
    "id": 1,
        "name": "Jhon",

        "days_label": ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

        "months_label": ['January', 'February', 'March', 'April',
                         'May', 'June', 'July', 'August', 'September',
                         'October', 'November', 'December'],

        "days_per_month": [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
    }
];

I'm really not sure about my JSON file also.. Any help is really appreciate!

Here the codepen

p.s. If you also have any suggestion how to properly check ember in the console, will be super!

You can use ember-inspector to check your Ember app https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en — IgorT, Aug 28 '14 at 13:54
yes i'm already using it but most of the time isn't very helpful :( — Giorgia Sambrotta, Aug 28 '14 at 14:04

Craicerjack · Accepted Answer · 2014-08-28T14:14:39.483

2

Making a find() call is to find all models that are cals and so is going to return an array anyway so no need for toArray()
Given that an array is being returned you need to loop through that array to find the name so code should be:

<script type="text/x-handlebars" data-template-name="cal">
  <div class="calendar">
    Hello!!!
    {{#each cal in model}}
    <h2>{{cal.name}}</h2>
    {{/each}}
  </div>
</script> 


WebCalendar.CalRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('cal');
    }
});

also in your model your days_label, months_label, days_per_month are defined as strings but in your json they are arrays.

Ember.Logger.log(); will log things o the console for you: ex

WebCalendar.CalRoute = Ember.Route.extend({
        model: function(){
        var cals = this.store.find('cal');
        Ember.Logger.log(cals);
            return cals
        }
    });

edited Aug 28 '14 at 14:14

answered Aug 28 '14 at 13:42

Craicerjack

6,203
2
31
39

I used .toArray() because i cannot see clearly my data in the console and when I tryed with that they where there very clear so I thought was a simplification. About model defined as string, actually i search a lot for how can i defined them and I finded just number and string so I guessed that I cannot defined as Array but now i know Yeyy! Thanks! Last I tried already to use each but it was complaining that no Array was there. And now, after fixing all the others small problems, I can see a better error msg: My Controller is defined as ObjectController instead it ask for An ArrayController – Giorgia Sambrotta Aug 28 '14 at 13:57
Basically: Thank you very much!! :) One last question: how can I access to one day of the week for example? I thought I just should do {{days_label[2]}} but it doesn't really work – Giorgia Sambrotta Aug 28 '14 at 14:02
looking at your code pen you cant do DS.attr('array') - ember wont understand it - leave them as ('strings') to get a day of the week you would need to do a computed property – Craicerjack Aug 28 '14 at 14:04
Right, i just found it a way to do it: http://stackoverflow.com/questions/12168570/how-to-represent-arrays-within-ember-data-models/13884238#13884238 that' shoudl solve my problem – Giorgia Sambrotta Aug 28 '14 at 14:08
glad to hear and glad i could help – Craicerjack Aug 28 '14 at 14:15

Ember: can't display my data

1 Answers1