Question

您好我有分类路线，然后是产品路线。每个产品都有很多图像。我想在旋转木马中显示这些图像。我点击的第一个产品我得到带图像的旋转木马但是当我点击第二个产品时没有显示旋转木马

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>')
        })
    })
});

show-carousel组件

  {{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'
        });
    });
});

Answer 1

如果Ember视图和Ember Components案例在init（）方法中访问dom是一个坏主意，因为您尝试访问的元素可能还没有插入到dom中。所以将init方法中的代码放入didInsertElement（）可能会解决您的问题。

每个产品（路线）余烬的旋转木马

1 个答案: