Question

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

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

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。

希望它有所帮助。

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

1 个答案: