Knockoutjs组件不能使用js功能

我想创建一个基本上是搜索栏的组件。后端的这些搜索栏将“和”所有搜索的术语放在一起。Knockoutjs组件不能使用js功能

所以我创建了组件，我能够看到它，我的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>

来源

2016-12-01 Helper

您的andBlock组件是动态创建的，因此您在docum上注册的事件负载未达到您在以后创建的组件。所以你应该使用delegated events。它会将事件注册到将在稍后创建的后代元素。

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

来源

2016-12-02 03:35:37 Adrian

不知道为什么我完全看过那个。谢谢！任何想法如何处理knockoutjs组件中的id问题？ – Helper

你的意思是冗余ID吗？如果是，那么你可以在'andsCollection'项目（例如'data-bind =“attr：{id：'twoSearch'+ $ data.id（）}”'）中增加一个id，或者你可以刮id的想法和只是使用类。 – Adrian

Knockoutjs组件不能使用js功能

回答

相关问题