Javascript 用于动态引导工具提示的自定义KnockoutJS bindingHandler

在这里，我还发现了一些关于将引导工具提示与自定义淘汰绑定处理程序结合使用的其他问题和资源。然而，我还没有找到一个内聚的解决方案，1）涉及使用动态淘汰模板2）工具提示可以在绑定到的数据发生更改时进行更改

我也不在GitHub上，但其中的工具提示标题只呈现一次

我在前面的基础上创建了一个新的dynamicTooltip，具有以下新的dynamicTooltip

新的DynamicTooltip数据绑定器如下所示：

ko.renderTemplateHtml = function (templateId, data) {
    var node = $("<div />")[0];
    ko.renderTemplate(templateId, data, {}, node);
    return $(node).html();
};

ko.bindingHandlers.tooltip = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var local = ko.utils.unwrapObservable(valueAccessor()),
        options = {};

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
    ko.utils.extend(options, local);

    var tmplId = options.kotemplate;

    ko.utils.extend(options, {
        title: ko.renderTemplateHtml(tmplId, viewModel)
    });

    $(element).tooltip(options);

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).tooltip("destroy");
    });
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var local = ko.utils.unwrapObservable(valueAccessor()),
        options = {};

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
    ko.utils.extend(options, local);

    var tmplId = options.kotemplate;
    var forceRefresh = options.forceRefresh;
    var newdata =  ko.renderTemplateHtml(tmplId, viewModel); 
    $(element).data('bs.tooltip').options.title = newdata

},
options: {
    placement: "top",
    trigger: "hover",
    html: true
}};

ko.renderTemplateHtml=函数（templateId，数据）{
变量节点=$（“”）[0]；
renderTemplate（templateId，数据，{}，节点）；
返回$（node.html（）；
};
ko.bindingHandlers.tooltip={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var local=ko.utils.unwrapobbservable（valueAccessor（）），
选项={}；
extend（选项，ko.bindingHandlers.tooltip.options）；
ko.utils.extend（选项，本地）；
var tmplId=options.kotemplate；
ko.utils.extend（选项{
标题：ko.renderTemplateHtml（tmplId，viewModel）
});
$（元素）。工具提示（选项）；
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$（元素）。工具提示（“销毁”）；
});
},
更新：函数（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var local=ko.utils.unwrapobbservable（valueAccessor（）），
选项={}；
extend（选项，ko.bindingHandlers.tooltip.options）；
ko.utils.extend（选项，本地）；
var tmplId=options.kotemplate；
var forceRefresh=options.forceRefresh；
var newdata=ko.renderTemplateHtml（tmplId，viewModel）；
$（元素）.data（'bs.tooltip'）.options.title=newdata
},
选项：{
位置：“顶部”，
触发器：“悬停”，
html：对
}};

这还不完整，因为我正在通过在视图模型上传递一个虚拟数据绑定属性来手动触发更新调用，在本例中，它被称为renderTooltip（）：

悬停在我身上

我希望能够在数据更改时触发工具提示刷新自身

我想我应该使用createChildContext（）和ControlsDescentBindings，但我不是很确定

---

有什么想法吗？我将继续更新它，因为动态引导工具提示似乎是一个常见的想法。

问题的根源在于更新绑定没有启动，因为它不依赖于您尝试更新的属性（即firstName和address）

通常，您可以将这些属性委托给新绑定，并让knockout自动处理依赖项跟踪。但是，在本例中，您实际上返回了一个字符串，因此无法使用元素的自动绑定。字符串是必需的，因为工具提示就是这样工作的。如果它可以动态读取DOM元素，那么自动绑定就可以工作，但是因为它需要HTML字符串，所以绑定无法影响这一点

我看到的两个选项：

1。自动创建对模板使用的属性的依赖关系。这可以通过隔离模板视图模型（数据）来实现，如本手册所示：

2。不要使用基于DOM的模板，而是使用ko.computed在视图模型内生成模板。这将根据需要自动创建依赖项。 请参见此小提琴，以了解其示例：

var-vm={
firstName:ko.observable（“初始名称”），
地址：ko.observable（#3#胡桃街55号），
changeTooltip:函数（）{
此名称为：firstName（“新名称”）；
}
};
vm.tooltipHtml=ko.computed（函数（）{
返回“+vm.firstName（）+”+
“+vm.address（）+”；
});
ko.应用绑定（vm）；

---

注意：在这两个版本中，我都进行了一些重构——主要是为了简化

谢谢，我更喜欢v1，因为我试图将DOM排除在VM之外。特别是因为我的真实例子，没有淡化到firstName&address属性是相当大的一点。我想广告，你的解决方案保持跟踪属性是很好的。我试图在自定义bindingHandler中执行类似的操作，但遇到了问题。我有一个新的JSFIDLE up：它将显示名称实际上可以在连续的数据绑定操作中更改。

<a data-bind="tooltip: { title: firstName, placement: 'bottom', kotemplate: 'tile-tooltip-template', forceRefresh: renderTooltip() }">Hover on me</a>

//create a dependency for each observable property in the data object
for(var prop in templateData)
    if( templateData.hasOwnProperty(prop) && ko.isObservable(templateData[prop]))
        templateData[prop]();

var vm = {
    firstName: ko.observable('Initial Name'),
    address: ko.observable('55 Walnut Street, #3'),
    changeTooltip: function () {
        this.firstName('New Name');
    }
};

vm.tooltipHtml = ko.computed(function () {
    return "<h2>" + vm.firstName() + "</h2>" +
        "<span>" + vm.address() + "</span>";
});

ko.applyBindings(vm);