Question

我使用无容器控制流语法来实现＆＃39;如果＆＃39;结合：

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

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

$("body").initLib();

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

但由于button是基于＆＃39; if＆＃39;添加的虚拟元素。绑定，图书馆不会添加button的功能。

处理此方案的最佳方法是什么？我可以延长＆＃39; if＆＃39;虚拟元素的绑定？

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

Answer 2

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

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

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

jQuery docs on on(), and delegated events

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

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

元素addef上的自定义逻辑＆＃34; if＆＃34;与虚拟元素绑定

2 个答案: