如何獲取縮略圖以與余燼-輪播組件一起使用？

Question

我剛剛安裝了ember-carousel組件，並用它來代替Ember之前的js圖像輪播設置，但該設置與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}}

Rental-listing.hbs：

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

輪播僅具有向左滑動/向右滑動按鈕以瀏覽圖像。 我還想要縮略圖，因此您可以單擊縮略圖，輪播會顯示相應的圖像。

我已經設置了帶有縮略圖的布局，我只是不知道如何創建此單擊功能。 通常，我會使用jQuery和縮略圖上的數據屬性來切換當前顯示的圖像，但是我不確定如何在余燼輪播/車把模板中為縮略圖創建這種單擊功能。 （我是Ember / handlebars的新手，很高興能為我指明正確的方向。）我猜我需要在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 version > = 1.13和Ember-cli 。 否則，代碼可能會略有變化。