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功能

回答

相關問題