Ember.js下一张图片

Question

好的，我是ember.js的新手，到目前为止还不错，但是我的问题是，假设图像的ID是随机的，我如何实现下一个/返回图像？ 到目前为止我的app.js

App = Ember.Application.create({});



App.Router.map(function() {
  // put your routes here
  this.resource('posts');
  this.resource('post',{path:':post_id'})
});




App.PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});


App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return posts.findBy('id', params.post_id);
  }

});

Answer 1

您的问题有点含糊，但是对于初学者来说，您可能需要为每个您的模板分别创建一个模板 （用于保存html），一个视图 （用于管理用户交互性）和一个控制器 （用于处理/装饰模型数据）路线。

实现下一个/上一个图像功能肯定有不止一种方法。 下面是一个非常基本的方法的示例。 您可以轻松地创建更具视觉吸引力和响应能力的内容，但是以下内容应为您指明正确的方向。 以下代码尚未经过测试； 只是给您概念和起点。 您无需在此时创建视图（如果不存在，则将在后台创建通用视图），但是如果您想进行任何动画或其他DOM操作，则可能需要它们。

范本

<script type="text/x-handlebars" data-template-name="posts">
{{#each}}
  <li>{{#link-to 'post' id}}{{title}}{{/link-to}}</li>
{{/each}}
</script>

<script type="text/x-handlebars" data-template-name="post">
<h1>{{title}}</h1> 
<img class="post-image" {{bind-attr src=imageSrc}}/>
<a href="#" {{action 'prevImage'}}>Prev Image</a> 
<a href="#" {{action 'nextImage'}}>Next Image</a>
</script>

控制器

App.PostsController = Ember.ArrayController.extend({

});

/* This assumes the Post model contains an images field which is an array
 * post.images = [{src:'source_path 1'},{src:'source_path 2'},...] 
 */
App.PostController = Ember.Controller.extend({
  //holds current index into the images list
  currentImage: 0,

  //computed property which observes changes to currentImage
  imageSrc: function()
  {
    return this.get('images')[this.get('currentImage')].src;
  }.property('currentImage'),

  actions:
  {
    nextImage: function()
    {
      var next = this.get('currentImage') + 1;
      if( next >= this.get('images').length )
        next = 0;
      this.set('currentImage', next);
    },
    prevImage: function()
    {
      var prev = this.get('currentImage') - 1;
      if( prev <= -1 )
        prev = this.get('images').length-1;
      this.set('currentImage', prev);
    }
  }
});

观看次数

App.PostsView = Ember.View.extend({

});


App.PostView = Ember.View.extend({

});