通过“if”与虚拟元素绑定对元素 addef 的自定义逻辑答案

【问题标题】：custom logic on elements addef by "if" binding with virtual elements通过“if”与虚拟元素绑定对元素 addef 的自定义逻辑
【发布时间】：2017-09-15 03:05:37
【问题描述】：

我正在使用无容器控制流语法进行 'if' 绑定：

<!-- ko if: property -->
<div>
    <button type="button">My Button</button>
</div>

我也在使用一个 UI 库，它的初始化需要在 JS 中调用类似这样的东西：

$("body").initLib();

这将使按钮以某种方式工作和感觉。

但由于 button 是基于 'if' 绑定添加的虚拟元素，因此库不会添加 button 的功能。

处理这种情况的最佳方法是什么？我可以扩展虚拟元素的“if”绑定吗？

【问题讨论】：

你应该在你的viewModel.property被初始化之后初始化$("body").initLib()。
这不会解决我的问题。
按钮随时被KO添加到HTML中。发生这种情况后，我需要一种调用 initLib() 的方法。
它不能随时添加，只有当property字段为真或有一定值时才会添加。这样你就可以观看了。
您建议在 viewModel.property 初始化后调用 initLib()。它不起作用，因为如果属性为“false”，则 KO 不会将按钮添加到 DOM 中，因此 initLib() 此时不会对按钮产生任何影响。当属性变为“真”时，我需要再次以某种方式调用 initLib()。

标签： knockout.js knockout-3.0

【解决方案1】：

一种方法是创建自定义绑定，如

  ko.bindingHandlers.myLibInit = {
      init: function(element, valueAccessor) {
          $("body").initLib();
      }
  };

并拥有像

这样的虚拟元素

  <!-- ko if: property -->
  <div>
      <button type="button" data-bind="myLibInit:{}">My Button</button>
  </div>
  <!-- /ko -->

【讨论】：

谢谢。是的，这也是我考虑的选项之一。但这并不漂亮。我想知道是否没有其他方法。
在绑定if执行时，会在dom中注入button元素。所以我认为按钮不再是虚拟元素了。

【解决方案2】：

如果您可以修改initLib 代码，最好的方法是使用委托事件，这在注册事件处理程序时不依赖于页面上存在的元素。这背后的逻辑是事件在 DOM 树中冒泡，因此您在页面中固定的容器中注册处理，例如body，然后指定要处理的事件和选择器。因此，如果用户单击按钮，则事件会冒泡到 body 元素，如果它满足过滤器，则处理事件。注册处理时元素是否存在并不重要。这是通过使用$.on() 来完成的，例如：

$('body').on('click', 'input[type=button]' , function() { /* handler */});

要实现过滤器，在这种情况下选择所有按钮，您可以使用id，或将data- 属性添加到元素（按钮），以便您可以过滤它们。

jQuery 文档on on(), and delegated events

如果您无法修改库，则可以使用visible 绑定来代替if 绑定。这样就可以注册处理程序，并且不会丢失。 注意：我认为您不能在虚拟元素上使用 visible ，但您可以使用具有适当样式的元素使其看起来好像不存在。

注意：一般情况下，您应该尽量避免将 ko 与 jQuery 混合使用，因为它们使用不同的方法，并且将它们一起使用会导致冲突。

【讨论】：

谢谢。但是库正在做的一个例子是，当您将鼠标悬停在按钮上时，它可以显示一个漂亮的工具提示（基于“title”属性）。
我提供了两种可能的解决方案。 1）您不能修改库以使用委托事件吗？这是“不引人注目的javascript”的技术，例如由引导程序使用（通过提供适当的属性）。 2）如果你不能做我推荐的1，你不能简单地初始化库并保持元素隐藏，这样eevnt处理程序就不会丢失吗？您对这些技术有任何疑问或问题吗？