javascript - 直接从事件处理程序中的目标元素访问 knockout 绑定(bind)值

Question

我在实现通过鼠标悬停调用的自定义工具提示绑定(bind)方面遇到了一些困难，因此我需要一个事件处理程序来显示工具提示。现在，工具提示的内容可以是静态字符串，也可以是内容可更改的可观察对象，但工具提示模块本身是单例。另外，页面上可以有多个工具提示元素，因此工具提示 show函数只是接收事件和要显示的内容。对我来说，最简单的方法是我可以单独从监听器中的事件目标访问实际绑定(bind)值。

现在我知道有ko.dataFrom函数，但对于静态变量，我在任何地方都看不到实际的绑定(bind)值(即与 init 函数中 valueAccessor() 返回的值相同)，只能看到整个 View 模型。

这里有一些简化的代码来说明它:

<span class="icon help" data-bind="tooltip: 'some static string'"></span>

(但正如我所说，工具提示绑定(bind)后面也可能有一个可观察对象)

ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        element.addEventListener("mouseover", ko.bindingHandlers.tooltip.showTooltip);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            element.removeEventListener("mouseover", ko.bindingHandlers.tooltip.showTooltip);
        });
    },
    showTooltip: function(event) {
        var data = ko.dataFor(this);
        tooltip.show(event, data);
    }
}

现在的问题是“数据”仅包含 View 绑定(bind)到的整个 View 模型。但是在哪里可以找到“一些静态字符串”呢？

我也尝试过“ko.contextFor”，但 $root、$data 和 $rawData 都是一样的。我确信我在这里忽略了一些东西，或者如果不将字符串添加到数据属性或类似的东西，这是不可能的，我想避免这种情况。

Answer 1

这里的根本问题是，您不应该尝试重用事件处理程序，或者至少，如果您打算这样做的话，应该绑定(bind)它。

我只需将 showTooltip 移至 init 即可:

ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var showTooltip = function(event) {
            tooltip.show(event, ko.unwrap(valueAccessor()));
        };
        element.addEventListener("mouseover", showTooltip);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            element.removeEventListener("mouseover", showTooltip);
        });
    }
};

小功能非常便宜。

实时示例(使用单击而不是鼠标悬停并仅附加到文档):

var tooltip = {
  show: function(event, value) {
    var div = document.createElement('div');
    div.innerHTML = "tooltip: " + value;
    document.body.appendChild(div);
  }
};
ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var showTooltip = function(event) {
            tooltip.show(event, ko.unwrap(valueAccessor()));
        };
        element.addEventListener("click", showTooltip);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            element.removeEventListener("click", showTooltip);
        });
    }
};

var vm = {
  items: [
    {text: "one", tooltip: "uno"},
    {text: "two", tooltip: "due"},
    {text: "three", tooltip: "tre"},
    {text: "four", tooltip: "quattro"}
  ]
};
ko.applyBindings(vm, document.body);
// To prove the observables work, update one after a delay
setTimeout(function() {
  vm.items[2].tooltip = "TRE";
}, 100);

<div data-bind="foreach: items">
  <div data-bind="text: text, tooltip: tooltip"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

或者，使用绑定(bind):

ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var boundHandler = ko.bindingHandlers.tooltip.showTooltip.bind(
            null,
            valueAccessor
        );
        element.addEventListener("click", boundHandler);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            element.removeEventListener("click", boundHandler);
        });
    },
    showTooltip: function(valueAccessor, event) {
        tooltip.show(event, ko.unwrap(valueAccessor()));
    }
};

var tooltip = {
  show: function(event, value) {
    var div = document.createElement('div');
    div.innerHTML = "tooltip: " + value;
    document.body.appendChild(div);
  }
};
ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var boundHandler = ko.bindingHandlers.tooltip.showTooltip.bind(
            null,
            valueAccessor
        );
        element.addEventListener("click", boundHandler);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            element.removeEventListener("click", boundHandler);
        });
    },
    showTooltip: function(valueAccessor, event) {
        tooltip.show(event, ko.unwrap(valueAccessor()));
    }
};

var vm = {
  items: [
    {text: "one", tooltip: "uno"},
    {text: "two", tooltip: "due"},
    {text: "three", tooltip: "tre"},
    {text: "four", tooltip: "quattro"}
  ]
};
ko.applyBindings(vm, document.body);
// To prove the observables work, update one after a delay
setTimeout(function() {
  vm.items[2].tooltip = "TRE";
}, 100);

<div data-bind="foreach: items">
  <div data-bind="text: text, tooltip: tooltip"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

注意绑定(bind)值如何位于事件参数前面。