Ленивая загрузка привязки при наведении мыши

Question

Ленивая загрузка привязки при наведении мыши

0

Я использую следующую привязку для каждой ячейки в большой таблице Excel Excel. Прямо сейчас я привязываюсь к каждой ячейке, есть ли способ сделать это с ленивой загрузкой ее при наведении мыши на определенную задержку, чтобы каждая ячейка не активировала ее? Если мышь находится над ячейкой в течение 2 секунд, привязка всплывающей подсказки активируется и отображается. Эта всплывающая подсказка - всплывающая подсказка для начальной загрузки.

 ko.bindingHandlers.tooltip = {
        init: function (element, valueAccessor) {
            $(element).tooltip();

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).tooltip("destroy");
            });
        }
    };

Mike Flynn 25 апр. 2014, в 22:36

Источник

0

У меня нет времени для полноценного ответа прямо в эту секунду, но вы могли бы захватить событие ввода мыши, запустить setTimeout, и, если оно все еще зависает после x количества миллисекунд, показать подсказку.
PW Kad 25 апр. 2014, в 20:07

Теги:

javascript

jquery

knockout.js

lazy-loading

lazy-initialization

1 ответ

Ещё вопросы

У меня нет времени для полноценного ответа прямо в эту секунду, но вы могли бы захватить событие ввода мыши, запустить setTimeout, и, если оно все еще зависает после x количества миллисекунд, показать подсказку.

janfoeh · Accepted Answer · 2014-04-25T19-11-00.000Z

Вместо добавления одного обработчика события на ячейку вы можете добавить один обработчик событий в контейнер ячеек. Учитывая разметку

<div class="cell-container" data-bind="tooltipContainer: true">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</diV>

вы можете использовать эту привязку:

ko.bindingHandlers.tooltipContainer = {
    init: function (element, valueAccessor) {
        $(element).on('hover', '.cell', function() {
          $(this).tooltip();
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    }
};

Если вы хотите добавить таймаут сверху, это

ko.bindingHandlers.tooltipContainer = {
    init: function (element, valueAccessor) {
        $(element).on('hover', '.cell', function() {
          var $this    = $(this),
              callback = function() { $this.tooltip(); };

          setTimeout(callback, 2000);
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    }
};

должно сработать.