0

なぜ機能しないのかを理解しようとしています。

私はこのようなものを持っています。

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

しかし、Botostrap のファースト クラス API は、JS メソッドを実行する必要がなく、それらのウィジェットが自動的に機能することを意味します。問題は、私の {{model}} が Ajax リクエストによっていっぱいになる前に、Bootstrap がこれを実行したと思われることです。したがって、このカルーセルは機能しません。

面倒なのは、私がすでにデータAPIをオフにしようとしたことです - $(document).off('.data-api'); 手動でカルーセル メソッドを呼び出しますが、それでも機能しません。

カルーセルはハード コーディングされたデータで動作しますが、Ember モデルからカルーセルの div アイテムを入力しようとすると、動作が停止します。

  1. 何か案が？
  2. これが存在する理由 - https://github.com/emberjs-addons/ember-bootstrap ? ここで私の問題を正確に解決するために存在しますか? （カルーセルはありませんが）
4

3 に答える 3

4

だから私はこれに対する解決策を持っていますが、それはきしみのためではありません.

カルーセルの場合、Bootstrap はどの要素を探すかについて十分に具体的ではありません。カルーセル関数が操作する要素のインベントリに移動すると、Ember が DOM に挿入するメタモルフ タグでチョークします。基本的に、画像の数を調べると、実際よりも 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()])

これにより、カルーセル プラグインは metamorph タグを無視できます。

お役に立てれば。

于 2013-12-12T19:01:39.630 に答える
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();
    }
});

ヘルパーが現在のアイテムのを提供するため、activeクラスを手動で設定する必要はありません。eachindex

于 2015-04-18T21:23:24.407 に答える