6

エフェクトを使って knockout.js UI にスパイスを加えようとしているときに、条件に基づいて交互に切り替わるいくつかのセクションがあることがよくあることに気付きました。この例としては、要素が選択されていないときに指示を表示するリスト ビューの詳細ペインがあります。これは、目に見えるバインディングを使用して宣言的にうまく機能しますが、アニメーションの表示/非表示の連鎖がないため、アニメーションをミックスに追加しようとすると不十分です。

ここでは、デモ用にアニメーションの knockout.js の例を簡略化しました。

http://jsfiddle.net/yq5rS/

私はおそらく何かをハックすることができますが、この種のチェーンを行うためのより慣用的なknockout.jsの方法を探しています。

私はいくつかの解決策を検討しました：

  • 条件と、オンとオフの状態で表示する要素をキャプチャするカスタム バインディングを持つコンテナー要素を持つ。
  • 条件と、他の要素が非表示かどうかをチェックする関数の両方に依存する「アニメーションが表示される」バインディングを持つ。

編集：明確にするために、ある要素のフェードアウトが他の要素のフェードインの前に発生するようにします。ありがとうジョシュ。

4

2 に答える 2

3

このアプローチは、表示するテキストを決定するためにブール値のオブザーバブルを参照する、計算されたオブザーバブルを作成します。

これが動作するjsfiddleです。http://jsfiddle.net/yq5rS/10/

そして、これがコードの簡単なアイデアです

HTML

<div class='liveExample'> 
    <p> 
        <label>
            <input type='checkbox' data-bind='checked: display' />
            Active?
        </label>
    </p>

    <p data-bind='fadeVisible: IsActive()'></p>    
</div>​

スクリプト

var Model = function() {
    var self = this;
    self.display= ko.observable(false);
    self.IsActive = ko.computed(function() {
        if (self.display()) return "Active."
        return "Not active."
    }); 
};


ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();
    }
};

ko.applyBindings(new Model ());​

編集

私の最初の応答は、フェードアウト、待機、およびフェードインではありませんでした。

ko.bindingHandlers.fadeVisible = {
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).fadeOut('slow', function () {
            $(element).html(ko.utils.unwrapObservable(value)).fadeIn();
        });
    }
};
于 2012-09-19T21:50:55.047 に答える
0

あなたにとってうまくいくかもしれない1つのアプローチは、同じスペースに2つの要素を表示してそれらを切り替えるのではなく、1つの要素に固執し、それをフェードアウトし、コンテンツを交換してからフェードインするカスタムバインディングを使用することです. jsfiddleにリンクされた簡単なケースでうまく機能します。

Ryan Niemeyer のブログと、リンクされているJSFiddleをご覧ください。彼がフェードする方法は、計算されたオブザーバブルの合計を変更する方法で、div の交換の例に適用できるようです。

2 つの div を切り替えるだけでなく、おそらくもっと複雑なタスクがあることは知っていますが、ソリューションをより一般的なケースに拡張する方法があるかもしれません。私はテンプレートの専門家ではありませんが、テンプレートをよく使ったことがありますか? 特に、テンプレートを動的に変更するtemplate { name: function() {} }ための構文は?

(これで私は正式にニーマイヤー ファンボーイになると思いますが、恥ずかしくはありません :-P )

于 2012-07-31T13:11:31.143 に答える