Ember.js 夹具适配器 ID 错误，夹具数据使用 for 循环生成

Question

我正在尝试使用 Ember 完成看似简单的任务。我想将一些图像放在一个目录中，并让我的 ember 应用程序显示这些图像。我想出的一个我认为非常聪明的解决方案是让一个 for 循环生成一个夹具数据对象，如果它们按顺序编号，它将对应于目录中的图像。

我似乎接近了，但我收到了这个错误：

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

这看起来很奇怪，因为在摘录的夹具数据中显示了一个 id。这让我觉得这可能是数据生成方式的问题？这是我正在使用的完整代码：

//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;

以及相关的 HBS 代码：

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

想法？

Answer 1

这让我觉得这可能是数据生成方式的问题？

您猜对了，是您生成导致问题的固定装置的方式。所以尝试这样做：

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);
}

您还应该将要链接的路线放在引号中：

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

看这里工作jsbin。

希望对你有帮助。