3

Knockout で素晴らしい滑らかなカルーセル ( http://kenwheeler.github.io/slick/ )を使用したかったのです。他のいくつかの質問（https://stackoverflow.com/questions/26368176/slick-js-carousel-not-working-with-knockout-template-binding）を見た後、使用する方法があるようですカスタムバインディングですが、適切にロードするのに問題があります-DOMが完全にロードされる前に滑らかなカルーセルが初期化されているように見えるため、最後のスライドが最初のスライドに接続されません. また、内部 dom 要素がレンダリングされた後に呼び出されるノックアウト js カスタム バインディングを調べ、子バインディング コンテキストを使用して、カスタム バインディングで子要素が最初にバインドされるようにしようとしています。

html マークアップは次のとおりです。

<div data-bind = "slick">
    <!-- ko foreach: results -->
      <div>
        <result-thumbnail params="result:$data"></result-thumbnail>
      </div>
    <!-- /ko -->
</div>

result-thumbnail は、カルーセルに表示したいデータをフォーマットする別のノックアウト コンポーネントです。カスタム バインディング ファイル内:

ko.bindingHandlers.slick = {
init: function(element, valueAccessor, allBindingsAccessor, data, bindingContext) {
    var options = {
        infinite:true,
        slidesToShow: 3,
        slidesToScroll: 1,
    };

    var childBindingContext = bindingContext.createChildContext(
        bindingContext.$rawData, 
        null, 
        function(context) {
            ko.utils.extend(context, valueAccessor());
        });
    ko.applyBindingsToDescendants(childBindingContext, element);

    var local = ko.utils.unwrapObservable(valueAccessor());
    ko.utils.extend(options, local);
    $(element).slick(options);
    return { controlsDescendantBindings: true };
},
update: function(element, valueAccessor, allBindingsAccessor, data, context) {
  }
};

私が考えていたいくつかのこと: - 洗練された初期化を更新関数に移動する必要がありますか? - 私が書いた洗練されたカスタム バインディングは、別の要素にバインドする必要がありますか? - オブザーバブルの値を変更する場合results、カルーセルを破棄してから再作成することでスリックを更新する必要がありますか?

どんな助けでも大歓迎です！私はまだカスタムバインディングについて学んでいます.誰かが滑らかなカルーセルをKnockoutで動作させる経験があれば、それも聞いてうれしいです.

4

1 に答える 1