Question

我的网页上有工具栏（顶部和底部），当用户将鼠标移动到顶部/底部边缘附近时，工具栏会显示。当它移开时，工具栏变得不可见。我希望立即显示工具栏，但在延迟3秒后隐藏。

该页面绑定到KO viewmodel，捕获鼠标移动＆amp;显示或隐藏。工具栏。在KnockoutJS中，油门/速率限制会使延迟成为可能，但它会双向工作。而只有当鼠标离开时我才想要延迟。

是否可以通过KnockoutJS实现这一目标，例如有条件设置油门/速率限制延迟？

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

可能不是最优雅的解决方案，但它可以完成工作。

如何使KnockoutJS油门/速率限制有条件地工作？

1 个答案: