javascript - 无法让 Bootstrap 轮播与 Ember 配合使用

Question

试图理解为什么它不起作用。

我有这样的东西。

<div class="carousel slide" id="new-prospect-container">
   <div class="carousel-inner">
   {{#each model}}
      <div class="item">
      ...
     </div>
   {{/each}}
   </div>
</div>

但是 Botostrap 的一流 api 意味着我们不需要执行任何 JS 方法，它们的小部件将自动工作。问题是我怀疑 Bootstrap 会在我的 {{model}} 被 Ajax 请求填充之前执行此操作。所以这个轮播不起作用。

令人烦恼的是我已经尝试关闭他们的 data-api - $(document).off('.data-api');并手动调用他们的轮播方法 - 仍然不起作用。

轮播适用于硬编码数据 - 但一旦我尝试从我的 Ember 模型填充轮播 div 项目，它就会停止工作。

1. 有什么想法吗？
2. 为什么会存在 - https://github.com/emberjs-addons/ember-bootstrap ？它的存在可以准确解决我的问题吗？ (虽然没有轮播)

Answer 1

1 - 我希望 this jsfiddle解决你的问题。

App.CarouselView = Ember.View.extend({    
    templateName: 'carousel',
    classNames: ['carousel', 'slide'],
    init: function() { 
        this._super.apply(this, arguments);
        // disable the data api from boostrap
        $(document).off('.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 obj = this.get('content.firstObject');
        Ember.set(obj, 'isActive', true);
    },
    previousSlide: function() {
        this.$().carousel('prev');
    },
    nextSlide: function() {
        this.$().carousel('next');
    },
    didInsertElement: function() {
        this.$().carousel();
    },
    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('\
                <img {{bindAttr src="view.content.image"}} alt=""/>\
                <div class="carousel-caption">\
                    <h4>{{view.content.title}}</h4>\
                    <p>{{view.content.content}}</p>\
                </div>')
        })
    })
});

2 - 我不知道为什么轮播不包含在 ember-boostrap 中。