1

私は、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}}

考え？

4

1 に答える 1

0

これは、データの生成方法に問題があるのではないかと考えさせられますか?

あなたは、問題を引き起こすフィクスチャを生成している方法が正しいと推測しています。したがって、代わりに次のようにしてみてください。

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

here working jsbinを参照してください。

それが役に立てば幸い。

于 2013-08-24T08:59:57.000 に答える