2

Knockout.js と CSS3 Animations を使用して、iPad 用の「WebApp」を構築しています。

異なるページ間の遷移はアニメーション化されています。アニメーションが終了したときに JavaScript コールバックを取得したい。

これで、次のように Javascript を使用してコールバックをキャッチできることがわかりました。

element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);

しかし、これを行うより良い方法はありませんか？「ノックアウト方式」？data-bindJavaScript コードで DOM 要素にアクセスするのではなく、DOMの属性を使用してコールバック関数をバインドしたい!

何か案は？

編集:多分私は Knockout.js に慣れていないことを追加する必要があります.仕方！

4

2 に答える 2

4

jQuery Transitとノックアウト カスタム バインディングを使用して、ページのスライド遷移を実現します。基本的に、アクティブなページ (div) をスライド アウトし、新しいページをスライド インします。モバイル デバイス (iPad、iPhone、iPod Touch、Android フォンなど) でも見栄えがします。バインディングは次のとおりです。

Javascript:

    var previousElement = null;
    ko.bindingHandlers.slideVisible = {
        init: function (element, valueAccessor)
        {
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value));
        },
        update: function (element, valueAccessor)
        {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value)
            {
                if (previousElement == null)
                { // initial fade
                    $(element).show();
                }
                else
                {
                    //uses CSS3 Transform for smooth mobile performance
                    $(previousElement).transition({ x: '-100%' }, function () { $(this).hide(); });
                    $(element).css({ x: '100%' });
                    $(element).show().transition({ x: '0%' }, function () 
{ 
//Callback | transition finished code here
});
                }
                previousElement = element;
            }
        }
    };

モデル スニペットを表示:

isPageVisible: ko.observable(false)

HTML:

<div data-bind="slideVisible: isPageVisible">
<!-- Page Content Here -->
</div>

JS フィドルのデモ

于 2013-03-21T17:36:31.910 に答える
2

私の経験から、この種のイベントを処理する「ノックアウト方法」はありません。

Knockout の作成者は、単純なバインディングに KOイベントバインディングを使用することを提案しています。ただし、より複雑で目立たないイベント バインディング シナリオでは、jQuery の使用をお勧めします: http://knockoutjs.com/documentation/unobtrusive-event-handling.html

私は現在 Knockout を使用してプロジェクトに取り組んでおり、彼の提案に従いました。いくつかの KOイベントバインディング (フォーム送信用) といくつかの jQuery イベント バインディング (私の場合はウィンドウ サイズ変更イベント用) を使用します。

もちろん、jQuery を使用する必要はありませんが、あなたのケースでは KO ライブラリの外に出るのがおそらく正しいルートです。楽しむ！

于 2012-04-23T11:55:07.643 に答える