Ember.js fixture adapter id error with fixture data generated using for loop

Question

I'm trying to accomplish what seems like a simple task using Ember. I want to drop some images in a directory and have my ember app display those images. A solution I came up with, which I thought was quite clever, was to have a for loop generate a fixture data object, which would correspond to the images in a directory if they were sequentially numbered.

I seem to be getting close, but I am getting this error:

Uncaught Error: the id property must be defined for fixture "{ id: 1, href: \"public/1.jpg\", style: \"top: 0px; left: 0px\" }"

Which seems odd, because there is an id showing up in the excerpted fixture data. This is making me think maybe it's an issue in the way the data is being generated? Here is the full code I'm working with:

//CONFIG
var imgsLength = 3

//JS-PREP
var imgLinks = [];

for (i = 0, topvar = 0, left = 0 ; i<imgsLength ; i++, topvar += 10, left += 10) {
  imgLinks.push('{ id: ' + (i + 1) + ', href: "public/' + (i + 1) + '.jpg", style: "top: ' + topvar + 'px; left: ' + left + 'px" }');
}

//APP
App = Ember.Application.create({});

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

App.Router.map(function() {
  this.resource('images', function() {
    this.resource('image', { path: ':image_id' });
  });
});

App.ImagesRoute = Ember.Route.extend({
  model: function() {
    return App.Image.find();
  }
});

var attr = DS.attr;

App.Image = DS.Model.extend({
  href: attr('string'),
  style: attr('string'),
});

App.Image.FIXTURES = imgLinks;

and the relevant HBS code:

{{#each model}}
  {{#linkTo image this}}<div {{bindAttr style="style"}}><img {{bindAttr src="href"}}></div>{{/linkTo}}   
{{/each}}

Thoughts?

Answer 1

This is making me think maybe it's an issue in the way the data is being generated?

You are guessing right it's the way you are generating the fixtures that causes the problem. So try to do it like this instead:

for (i = 0, topvar = 0, left = 0 ; i<imgsLength ; i++, topvar += 10, left += 10) {
  var image = {};

  image.id = (i + 1);
  image.href = "public/" + (i + 1) + ".jpg";
  image.style = "top: " + topvar + "px; left: " + left + "px";

  imgLinks.push(image);
}

You should also put the route you are linking to into quotes:

{{#each model}}
  {{#linkTo 'image' this}}<div {{bindAttr style="style"}}><img {{bindAttr src="href"}}</div>{{/linkTo}}   
{{/each}}

See here working jsbin.

Hope it helps.