Question

我正在努力实现使用鼠标悬停调用的自定义工具提示绑定，因此我需要一个事件处理程序来显示工具提示。现在，工具提示的内容可以一个静态字符串，或一个可以改变内容的可观察对象 - 但工具提示模块本身就是一个单例。此外，页面上可以有多个工具提示元素，因此工具提示show功能只接收事件和要显示的内容。对我来说，最简单的方法是，如果我只能从侦听器中的事件目标访问实际绑定值。

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

以下是一些简化的代码来说明它：

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

（但正如我所说，工具提示绑定背后可能还有一个可观察的）

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

现在的问题是“数据”只包含视图绑定的整个视图模型。但是在哪里可以找到“一些静态字符串”？

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

Answer 1

这里的根本问题是你不应该尝试重用事件处理程序，或者至少，如果你要去绑定它。

我只是将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);
        });
    }
};

小功能非常便宜。

直播示例（使用click代替mouseover，只是附加到文档中）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，使用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()));
    }
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意绑定值如何在事件参数前面。

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

1 个答案: