회전 목마 ember js

안녕하세요, 나는 카테고리 경로를 누른 다음 제품 경로가 있습니다. 각 제품에는 많은 이미지가 있습니다. 이 이미지를 회전 목마에 표시하고 싶습니다. 첫 번째 제품 나는 이미지 회전 목마 가져 오기를 클릭하지만 난 두 번째 제품을 클릭하면 더 회전 목마는회전 목마 ember js

MyApp.ShowCarouselComponent = Ember.Component.extend({ 
    content: [], 
    templateName: 'show-carousel', 
    classNames: ['carousel', 'slide'], 
    init: function() { 
     this._super.apply(this, arguments); 
     // disable the data api from boostrap 
     $(document).off('.carousel.data-api'); 
     // at least one item must have the active class, so we set the first here, and the class will be added by class binding 
     //var cdata = this.get('controller').get('carouselData'); 
     var obj = this.get('content').get('firstObject'); 
     Ember.set(obj, 'isActive', true); 
     console.log('this is what obj is '); 
     console.log(obj); 
    }, 
    previousSlide: function() { 
     this.$().carousel('prev'); 
    }, 
    nextSlide: function() { 
     this.$().carousel('next'); 
    }, 
    didInsertElement: function() { 
     this.$().carousel(); 
    }, 
    willDestroyElement: function() { 
     this.$('.carousel').remove(); 
     this._super(); 
    }, 
    indicatorsView: Ember.CollectionView.extend({ 
     tagName: 'ol', 
     classNames: ['carousel-indicators'], 
     contentBinding: 'parentView.content', 
     itemViewClass: Ember.View.extend({ 
      click: function() { 
       var $elem = this.get("parentView.parentView").$(); 
       $elem.carousel(this.get("contentIndex")); 
      }, 
      template: Ember.Handlebars.compile(''), 
      classNameBindings: ['content.isActive:active'] 
     }) 
    }), 
    itemsView: Ember.CollectionView.extend({ 
     classNames: ['carousel-inner'], 
     contentBinding: 'parentView.content', 
     itemViewClass: Ember.View.extend({ 
      classNames: ['item'], 
      classNameBindings: ['content.isActive:active'], 
      template: Ember.Handlebars.compile('\ 
       {{view.content}}\ 
       <img {{bind-attr src="view.content.product_url"}} alt="dfdds"/>\ 
       <div class="carousel-caption">\ 
        <h4>{{view.content}}</h4>\ 
        <p>{{view.content.image_description}}</p>\ 
       </div>') 
     }) 
    }) 
});

쇼 - 회전 목마 구성 요소

{{view view.indicatorsView}} 
    {{view view.itemsView}} 
    <a class="left carousel-control" {{action previousSlide target="view"}}>‹</a> 
    <a class="right carousel-control" {{action nextSlide target="view"}}>›</a>

router.js

this.resource('categories', { 
    path: '/' 
}, function() { 
    this.resource('category', { 
     path: '/:category_id' 
    }, function() { 
     this.resource('product', { 
      path: '/:product_id' 
     }); 
    }); 
});

출처

2014-05-24 Rigel

init의 코드를 삽입 요소 – Hardik127

에 삽입 해 주셔서 감사합니다. 답으로 답해야합니다. 나는 개체가 willDestroyElement() 메서드를 파괴하고 reintialization이 일어날 라우트 전환을 가정했다. 왜 이런 일이 일어 났는지 궁금하다. – Rigel

에 표시되지 않습니다 Ember보기 및 Ember 구성 요소의 경우 init() 메소드에서 dom에 액세스하는 것은 나쁜 아이디어입니다. 액세스하려는 요소가 아직 dom에 삽입되지 않았기 때문일 수 있습니다. init 메소드의 코드를 didInsertElement()에두면 문제가 해결 될 수 있습니다.

출처

2014-05-26 10:55:43 Hardik127

회전 목마 ember js

답변

관련 문제