2

私は数日間これを解決しようとしてきましたが、うまくいきませんでした。私たちが運営するいくつかの e コマース サイトで古いフラッシュ ブランドのようなバナーを販売する代わりに、Javascript とモバイル フレンドリーなソリューションのために、私はこの要件に追いつくようにしています:

  • ブランド リストと設定 (つまり、スライドごとの最大項目数) を AJAX 経由で取得します (完了)。
  • ブートストラップ カルーセルを使用します (完了)。
  • Knockout を使用した動的なカルーセル コンテンツのレンダリング

スライドごとにコンテンツを描画する方法が見つからないため、問題は後者にあります。私が達成しようとしているものの非動的レンダリング (ストレート html ベース) は、この SO の質問 (jsfiddle コンパニオンを使用) で確認できます。

スライドごとに複数のアイテムをレンダリングするために、KO foreach バインディングに問題があります。

次のコードに関するいくつかの洞察...

  • Brands:ブランド構造のリスト。ブランドを表す観察不可能な構造 (名前、画像 URL など) を含む observableArray。
  • $parent.isFirst(): スライドあたりのアイテムの最大量を指定して、新しいスライドを描画する必要があるかどうかを返します
  • $parent.defineItemClass:スライドのクラスを返します (最初の 1 つだけが「アクティブなアイテム」としてマークされ、残りは「アイテム」のみです)
  • $parent.drawTail:含まれている html を描画する必要があるかどうかを示します

テンプレート...

<script type="text/html" id="brand-widget-template">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="carousel slide" id="brands-carousel">
            <div class="carousel-inner" data-bind="foreach: brands">
                <!-- ko if: $parent.isFirst() -->
                <div data-bind="css: $parent.defineItemClass($index)">
                    <ul class="thumbnails">
                <!-- /ko -->
                    <li class="span1">
                        <div class="caption">
                            <h5 data-bind="text: Name"></h5>
                        </div>
                        <div class="thumbnail">
                            <img src="#" alt="">
                        </div>
                    </li>
                <!-- ko if: $parent.drawTail() -->
                    </ul>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

レンダリングが行われる方法について誤解があるに違いありません。デバッグ中に、$parent.drawTail が呼び出されないことに気付きました。何か案は？

これは、プロジェクトから最も重要な部分を分離したフィドルです。

ありがとう！ルイージ

4

1 に答える 1

0

ネストされた for each ループを使用できるように、メイン リストをネストされたリストに分割する計算されたオブザーバブルを使用する方がよいと思います。これにより、ビュー ロジックがテンプレートではなくビューモデルに戻されます。

したがって、ビューモデルの場合は次のようになります。

 self.brands_in_fours = ko.computed(function () {
        var outer_array = [];

        _.each(self.brands(), function (item, index) {
            if (index % 4 == 0) {
                outer_array.push(ko.observableArray([item]));
            } else {
                outer_array[outer_array.length - 1]().push(item);
            }
        });
        return outer_array;
    });

(underscore.js を使用して、self.brands 配列をループします)

テンプレート：

<div class="carousel-inner" data-bind="foreach: brands_in_fours">
    <div class="item" data-bind="css: {'active': $index()==0}">
        <ul data-bind="foreach: $data">
            <li class="span3">
                <div class="caption">
                    <h5 data-bind="text: Name"></h5>
                </div>
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="" />
                </div>
            </li>
        </ul>
    </div>
</div>

また、最初の要素への「アクティブ」クラスの追加を複雑にしすぎていると思います.インデックスを確認して、0に等しい場合は追加するだけです.

私はjsfiddleを添付しました

于 2013-11-05T23:35:56.757 に答える