0


シンプルな画像ギャラリーを構築しています。現在、私は nextImage メソッドにこだわっています。
私が期待したのは、モデル ID のリストです。したがって、#nextImage で ID をインクリメントするだけです。

  • #/写真/1
  • #/写真/2
  • #/写真/3

しかし、emberjs は URL として「ランダムな」ID を使用します

  • 写真/ ember283
  • 写真/ ember352

質問: ある画像から次の画像にリンクする方法

これは、コントローラーの1つでレコードを作成する方法です

//...
record = App.Photo.createRecord
      src : dataUrl
      title : "sometitle"

record.store.commit();

フォトコントローラー

App.PhotoController = Ember.ObjectController.extend
  nextImage : ->
    length = App.Photo.find().get('length')
    id = parseInt(@get "content.id")
    nextId = if id == length then 1 else id+1

    @transitionToRoute 'photo', App.Photo.find(nextId)

写真を一覧表示するテンプレート

{{#each photo in controller}}
    <div style="margin: 5px">
        {{#linkTo photos.photo photo}}
        <img width="100" heigth="100"
        {{bindAttr src="photo.url"
        alt="photo.title"
        title="photo.title"}} />
        {{/linkTo}}
    </div>
{{/each}}

1枚の写真のテンプレート

   <a href="#" {{action nextImage}}>
    <img {{bindAttr src="url"}} />
        {{title}}
   </a>

アプリルーター

App.Router.map ->
  @route "start"
  @route "photos"
  @route "photo",
    path: "/photos/:photo_id"

店

App.Store = DS.Store.extend
  revision: 12,
  adapter: 'DS.FixtureAdapter'
4

1 に答える 1

0

問題は、作成されるIDについての仮定があることだと思います。nextImageのこの代替実装はどうですか？

App.PhotoController = Ember.ObjectController.extend({
    needs : ["photos"], //will be accessible via 'controllers.photos'
    nextImage : function(photo){
        var pc = this.get("controllers.photos"); //get the photos controller
        var indexOf = pc.indexOf(photo);
        var next = null;
        if(indexOf + 1 === pc.get("length"))
            next = pc.objectAt(indexOf +1);
        else
            next = pc.objectAt(0);
        this.get("target").send("photo", next);

    }
});

それはどのように機能しますか？ ニーズプロパティを介して、フォトコントローラにアクセスできます。今、私はフォトコントローラーを使用して、次に表示する写真を決定しています。これには、RESTアダプターを使用する場合に追加の要求を発行する必要がないという追加の利点があります。

于 2013-03-10T17:42:34.213 に答える