2015-03-19 25 views
0

我的網頁上有工具欄(頂部爲&底部),當用戶將鼠標移動到頂部/底部邊緣附近時,該工具欄可見。當它移開工具欄變得不可見時。我想使工具欄立即可見,但隱藏3秒後延遲。如何使KnockoutJS油門/限速有條件工作?

該頁面綁定到KO viewmodel,該頁面捕獲鼠標移動&顯示或隱藏。工具欄。在KnockoutJS節氣門/速率限制會使延遲成爲可能,但它會在兩種方式下工作。而我只想在鼠標離開時延遲。

是否有可能通過KnockoutJS如實現這一目標有條件地設置油門/速度限制延遲

回答

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 }); 

可能不是最優雅的解決方案它完成了工作。