0

私の Web ページにはツールバー (上と下) があり、ユーザーがマウスを上端または下端に近づけた瞬間に表示されます。移動すると、ツールバーが見えなくなります。ツールバーをすぐに表示したいのですが、3 秒後に非表示になります。

ページは、マウスの移動と表示または非表示をキャプチャする KO ビューモデルにバインドされます。ツールバー。KnockoutJS では、throttle/ratelimit によって遅延が可能になりますが、両方の方法で機能します。一方、マウスが離れたときにのみ遅延が必要です。

KnockoutJS を介してこれを達成することは可能ですか?たとえば、条件付きでスロットル/レートリミット遅延を設定しますか?

4

1 に答える 1

1

このノックアウトの例にあるように、ノックアウト イベント バインディングを使用します。

http://knockoutjs.com/documentation/event-binding.html

次に、次のようにします。

<button data-bind="event: { mouseover: makeToolbarVisible, mouseout: disableToolbar }">Mouse over me</button>
<button data-bind="visible: toolbarVisibility">Details</button>

ビューモデル:

    var toolbarVisibility = ko.observable(false);
    var triggerComputed = ko.observable(false);

    function makeToolbarVisible() {
        toolbarVisibility(true);
    };

    function disableToolbar() {
        triggerComputed(true);
    };

    var comp = ko.computed(function () {
        triggerComputed(false);
        toolbarVisibility(false);
        console.log("Disabled after 3 sec");
        return triggerComputed();
    }).extend({ throttle: 3000 });

おそらく最も洗練されたソリューションではありませんが、仕事は完了します。

于 2015-03-19T08:28:42.820 に答える