无法让 Bootstrap 轮播与 Ember 一起使用答案

【问题标题】：couldn't get Bootstrap carousel to work with Ember无法让 Bootstrap 轮播与 Ember 一起使用
【发布时间】：2013-08-05 22:40:02
【问题描述】：

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

我有这样的东西。

<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 项，它就会停止工作。

有什么想法吗？
为什么会存在 - https://github.com/emberjs-addons/ember-bootstrap ？是否存在在这里完全解决我的问题？（虽然没有轮播）

【问题讨论】：

标签： javascript twitter-bootstrap ember.js carousel

【解决方案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 中不包含轮播。

【讨论】：

哇，非常感谢您的努力！它真的必须以这种方式实施吗？抱歉，我对 Ember 和整个 MVC javascript 框架还是新手。
我想是的。我所做的唯一 hack 是 isActive，设置在第一个元素中，但如果它让您厌烦，您可以使用 _isActive 等。以免与模型的某些数据冲突。
嗨，Marcio，您的代码在我的应用程序上运行良好。我想问你这个，因为我没有主意。但是我的轮播中的每个内容框都需要有 3 个项目。我的想法是每 3 个项目填充 App.CarouselView.itemsView，然后动态注入。不确定这是否可能或如何完成。您还有其他想法吗？
对不起，我没听懂你的问题，也许是因为英语不是我的母语。您想对轮播中的每个项目都有不同的视图吗？
也许每个项目的不同视图会有所帮助。这是我想要实现的完美示例 - sorgalla.com/projects/jcarousel/examples/static_controls.html 将其设置为每次点击滚动 3 个项目。现在点击下一个/上一个，看看它是如何一次滚动 3 个项目的？所以基本上在你的 itemsView 上，我需要一次从 App.carouselData 插入/迭代 3 个项目。

【解决方案2】：

所以我有一个解决方案，但它不适合娇气。

Bootstrap 没有足够具体地说明它在 Carousel 的情况下要查找哪些元素。当 carousel 函数清点要操作的元素时，它会阻塞 Ember 注入 DOM 的 metamorph 标签。基本上，当它查看有多少图像时，它总是会发现比实际数量多 2 个。

我在引导库中对轮播的底层代码进行了更改，这就是我所做的。

Line 337, change:
this.$items  = this.$active.parent().children()
TO
this.$items  = this.$active.parent().children('.item')


Line 379, change:
var $next     = next || $active[type]()
TO
var $next     = next || $active[type]('.item')


Line 401, change:
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
TO
var $nextIndicator = $(that.$indicators.children('li')[that.getActiveIndex()])

这有助于轮播插件忽略变形标签。

希望这会有所帮助。

【讨论】：

【解决方案3】：

我遇到了同样的问题，用下面的方法解决了。请注意，我使用的是 ember-cli，但它很容易适应。

这是templates/components/photo-carousel.hbs 文件：

<div id="my-carousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        {{#each photo in photos}}
            <li data-target="#my-carousel" data-slide-to=""></li>
        {{/each}}
    </ol>

    <div class="carousel-inner" role="listbox">
        {{#each photo in photos}}
            <div class="item">
                <img {{bind-attr src="photo.completeUrl" title="photo.caption" alt="photo.caption"}} />
                <div class="carousel-caption">
                    {{photo.caption}}
                </div>
            </div>
        {{/each}}
    </div>

    <!-- removed right and left controls for clarity -->
</div>

这是components/photo-carousel.js：

export default Ember.Component.extend({
    didInsertElement: function () {

        // Add the active classes (required by the carousel to work)
        Ember.$('.carousel-inner div.item').first().addClass('active');
        Ember.$('.carousel-indicators li').first().addClass('active');

        // Set the values of data-slide-to attributes
        Ember.$('.carousel-indicators li').each(function (index, li) {
            Ember.$(li).attr('data-slide-to', index);
        });

        // Start the carousel
        Ember.$('.carousel').carousel();
    }
});

请注意，未来版本的 Ember 将不需要手动设置 active 类，因为 each 助手将提供当前项目的 index。

【讨论】：