emberjs v.1.13: no model data in template accessible but in ember inspector

Question

I'm new to emberjs and I'm quite overwhelmed with it. I try to get my model data from model image to be displayed in my template index. I can see the model data in ember inspector in my browser but the template can't print it out with Handlebars.

What I noticed is that my model's records have no id. It is null.

\templates\index.hbs:

<form class="form">
    <label for="name">Name: </label>
    {{input class="form-control" type="text" value=imgurl}}
    {{input class="form-control" type="text" value=title}}
    <button class="btn btn-default" {{action "addImage"}}>Press it!</button>
</form>
{{#each image as |image|}}
    <p>{{this}}</p>
    {{else}}
    <p>Nothing!</p>
{{/each}}

\routes\image.js:

import Ember from 'ember';

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

\models\image.js:

import DS from 'ember-data';

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

\controllers\index.js:

export default Ember.Controller.extend({
    actions: {
        addImage: function(imgurl, title) {
            var model = this.store.createRecord('image', {
                imgurl: this.get('imgurl'),
                title: this.get('title')
            });
            model.save();
        }
     }
});

\router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('/', {path: '/index'});
});

export default Router;

I think my route is the problem. According to Ember Inspector there's no model tied to my index route.

Answer 1

In your app > adapters > application.js file, does it say, "DS.RESTAdapter.extend"? If so, and you don't have a backend, this may be a potential cause. If you're just building a test project, you can follow these steps after installing Ember CLI:

ember new test-image-project

Now change directories (cd) into the test-image-project and do:

ember generate model image
ember generate adapter application
ember generate route index

Now go to app > adapters > application.js and change

import DS from 'ember-data';
export default DS.RESTAdapter.extend({
  });

to

import DS from 'ember-data';
export default DS.FixtureAdapter.extend({
  });

Now go to app > models > image.js and paste the following code:

import DS from 'ember-data';

var Image = DS.Model.extend({
  imgurl: DS.attr('string'),
  title: DS.attr('string')
});

Image.reopenClass({
    FIXTURES: [
        {
        id: 1,
        imgurl: "www.google.com",
        title: "google"
      },
        {
          id: 2,
          imgurl: "www.amazon.com",
          title: "amazon"  
        }
    ]
});

export default Image;

Next do something like this in app > routes > index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.findAll('image');
  },
  actions: {
    addImage: function() {
            var controller = this.get('controller');
            var imgurl = controller.get('imgurl');
            var title = controller.get('title');
            return this.store.createRecord('image', {
                imgurl: imgurl,
                title: title
            });

        }
  }
});

and something like this in app > templates > index.hbs:

    <form class="form">
    <label for="name">Name: </label>
    {{input class="form-control" type="text" value=imgurl}}
    {{input class="form-control" type="text" value=title}}
    <button class="btn btn-default" {{action "addImage"}}>Press it!</button>
</form>
{{#each model as |image|}}
  {{#if image.imgurl}}
  <p>  {{image.imgurl}} </p>
    {{else}}
  <p>Nothing!</p>
  {{/if}}
{{/each}}

Answer 2

In your template, you should replace {{each image as |image|}} with {{each model as |image|}} and replace {{this}} with {{image.imgurl}} or {{image.title}} depending on your use-case.