javascript - Knockoutjs 组件无法使用 js 功能

Question

我正在尝试创建一个基本上是搜索栏的组件。后端的这些搜索栏会将搜索到的所有术语“和”在一起。

所以我已经创建了组件并且我能够看到它，我的 css 工作正常，但由于某种原因它不会运行我试图用来为标签设置动画的 js 函数。这当然只是问题之一。我也已经注意到，因为我将标签连接到带有 id 的搜索栏，而 id 只能使用一次，所以我无法在没有点击的情况下搜索第二个或第 n 个栏标签。

关于我如何使用组件解决这些问题有什么想法吗？

这是我的组件代码:

 ko.components.register('andBlock', {
  template:
      '<div class="andDisplay"> \
        <div class="initalAndOutput"> \
          <p class="orTermHeader" data-bind=""></p> \
          <span class="orTermList" data-bind=""></span> \
        </div> \
        <div class="searchForm andSearchForm" action=""> \
          <div class="andSearchBar"> \
            <label for="twoSearch">Add search term</label> \
            <input id="twoSearch" class="andSearch searching autocomplete" name="search" type="text" data-bind="" /> \
            <span class="searchIcon"><a class="mdi mdi-magnify mdi-18px" href="#"></a> \
          </div> \
        </div> \
      </div>'
});

这是我要运行的 jquery 函数:

$(function() {
  $('.andSearch').keyup(function() {
      $('.andSearchBar').addClass('typing');
      if($(this).val().length === 0) {
          $('.andSearchBar').removeClass('typing');
      }
  });
});

这就是我在 HTML 中填充组件所做的全部工作:

<div data-bind="foreach: andsCollection">
   <div data-bind="component: 'andBlock'"></div>
</div>

Answer 1

您的 andBlock 组件是动态创建的，因此您在文档加载时注册的事件不会影响您稍后创建的组件。

所以你应该使用delegated events .它会将事件注册到稍后创建的后代元素。

$(function() {
  $(document).on("keyup", '.andSearch', function() {
      $(this).closest('.andSearchBar').addClass('typing');
      if($(this).val().length === 0) {
          $('.andSearchBar').removeClass('typing');
      }
  });
});