Question

我正在构建一个简单的图库。目前我对nextImage方法感兴趣我所期待的是一个模型ID列表。所以我只是在#nextImage中增加id。

＃/照片/ 1
＃/照片/ 2
＃/照片/ 3

但是emberjs使用＆＃39; random＆＃39; ids作为URL

照片/ ember283
照片/ ember352

问题：如何从一张图片链接到下一张图片

这就是我在其中一个控制器中创建记录的方式

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

record.store.commit();

photo_controller

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

一张照片的模板

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

App_router

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

商品

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

Answer 1

我认为问题在于您对正在创建的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);

    }
});

它是如何运作的？ 通过needs属性，您可以访问照片控制器。现在我正在使用照相控制器来确定要显示的下一张照片。这具有额外的优势，即如果使用REST适配器，则不必发出其他请求。

EmberJS：链接到下一个记录

1 个答案: