Question

我刚刚安装了ember-carousel组件并使用它来替换我的Ember前图像轮播设置，这种设置与Ember（刚刚开始使用Ember）效果不佳。

https://www.npmjs.com/package/ember-carousel

https://github.com/selvagsz/ember-carousel

所以我在Handlebars模板中有这个代码，它可以很好地显示旋转木马中的所有图像：

index.hbs：

{{#carousel-container transition-interval=400}}
    {{#carousel-body}}
        {{#each model as |rentalUnit|}}
            {{rental-listing rental=rentalUnit}}
        {{/each}}
    {{/carousel-body}}

    {{#carousel-arrow direction="left" tagName="button"}}
        Slide Left
    {{/carousel-arrow}}
    {{#carousel-arrow direction="right" tagName="button"}}
        Slide Right
    {{/carousel-arrow}}
{{/carousel-container}}

租赁-listing.hbs：

{{#carousel-item}}
  <img src={{rental.image}} alt={{rental.caption}} width="500px" />
{{/carousel-item}}

旋转木马只有向左滑动/向右滑动按钮以浏览图像。我想也有缩略图，所以你可以点击一个缩略图，轮播将显示相应的图像。

我已经使用缩略图设置了布局，我只是不知道如何创建此点击功能。通常我会使用缩略图上的jQuery和数据属性来切换当前显示的图像，我只是不确定如何在这个ember-carousel / handlebars模板中为缩略图创建这样的点击功能。（我对Ember /车把很新，并且非常感谢任何帮助指出我正确的方向。）我猜我需要在carousel-container.js上添加一些自定义js代码？： https://github.com/selvagsz/ember-carousel/tree/master/app/components

Answer 1

一种解决方案可能是用组件替换<img src={{rental.image}} alt={{rental.caption}} width="500px" />，因此您可以设置所需的行为。例如，如果要在单击图像时执行某些操作，可以使用如下组件：

//rental-listing.hbs
{{#carousel-item}}
  {{thumbnail-image 
    image=rental.image  
    alt=rental.caption 
    thumbnailWidth="40" 
    thumbnailHeight="40" 
    imageWidth="230" 
    imageHeight="230"}}
{{/carousel-item}}

//thumbnail-image.js
  import Ember from 'ember';

  export default Ember.Component.extend({
    tagName:'img',
    attributeBindings:['src','alt','width','height'],
    isThumbnail:true,
    didReceiveAttrs(){
      this.set('src',this.get('image'));
      this.set('width',this.get('thumbnailWidth'));
      this.set('height',this.get('thumbnailHeight'));
    },
    click(){
      if(this.get('isThumbnail')){
        this.set('width',this.get('imageWidth'));
        this.set('height',this.get('imageHeight'));
      } else {
        this.set('width',this.get('thumbnailWidth'));
        this.set('height',this.get('thumbnailHeight'));
    }
    this.toggleProperty('isThumbnail');     
  }
});

您可以在此ember-twiddle

中查看示例

修改：我假设您使用的是ember version＆gt; = 1.13和Ember-cli。如果没有，代码可以稍微改变。

如何使用缩略图来处理ember-carousel组件？

1 个答案: