knockoutjs collegamento di clic non funziona in foreach nidificato

Question

Quindi ho un problema davvero strano con un binding di click di knockoutjs che non viene allegato ai tag di ancoraggio. Altri dati-bind = "" funziona ma non l'associazione dei clic.

qui sotto potete vedere il codice HTML e parte del ViewModel js file di

var tag = function (data) { 
    this.count = data.Count; 
    this.id = data.Id; 
    this.title = data.Title; 
    this.tagGroup = data.TagGroup; 
}; 
var tagContainer = function (data) { 
    this.tagList = $.map(data.Tags, function (item) { return new tag(item); }); 
    this.letter = ko.observable(data.Letter); 
}; 

var searchViewModel = function(){ 
    var self = this; 

    self.tagContainerList = ko.observableArray([]); 

    self.addFilter = function (tag) { 
    //move tag to active filters and do some more cool stuff here 
    }; 


}; 

<div id="modal-all-tags" data-bind="with:searchViewModel"> 
    <ul data-bind="foreach:tagContainerList"> 
     <li> 
      <span data-bind="text:$data.letter()"></span> 
      <ul data-bind="foreach:tagList"> 
       <li><a href="#" data-bind="click:$root.addFilter"><span data-bind="text:title"></span></a></li> 

      </ul> 
     </li> 
    </ul> 

     <a class="close-reveal-modal">&#215;</a> 
</div> 

Fondamentalmente si tratta di un popup modale e la sua carica quando l'utente fa clic su un link nella pagina. mando una richiesta al server e mi restituisce un elenco di contenitori Tag ogni hanno la lettera iniziale e un elenco di tag da rendere al di sotto della lettera come questa: Un una parola 1 una parola 2 B b parola 1 b parola 2 C c parola 1 c parola 2

e così via ...

le lettere sono visualizzate correttamente A, B, C e ciascuno ottiene la lista dei tag corretto reso sotto di loro con testo: titolo visualizzato correttamente.

Tutto funziona tranne addFilter(); funzione che voglio associare ad ogni link nella lista dei tag. Il browser salta e aggiunge un carattere hash all'URL. Firebug non mostra alcun errore sui binding.

Il motivo per cui il contenitore div ha un: searchViewModel è perché esiste un modello di visualizzazione principale per l'intera pagina. Ma questo non dovrebbe importare dal momento che sta lavorando su ogni altra pagina del progetto.

L'unica cosa che posso pensare è che l'associazione di clic $ root.addFilter è errata ma ho provato solo addFilter dove firebug restituisce l'errore "addFilter non è definito;"

E ho provato entrambi $ parent e $ root.

Qualcuno ha qualche suggerimento?

Answer 1

Un pensiero che ho avuto. La funzione addFilter si aspetta un parametro (tag) ma non si è passarlo nulla nel legame:

<a href="#" data-bind="click:$root.addFilter"> 

Potrebbe essere questo il problema?

Forse qualcosa sulla falsariga di:

<a href="#" data-bind="click:function() { $root.addFilter($data) }"> 

aiuterebbe?

Answer 2

Mi sono imbattuto in qualcosa di simile e all'inizio ho eseguito data-bind="click:function() { console.log($parents) }". Si noti che il suo $parents non è $parent. Ho cercato di trovare il contesto, e quello di cui avevo bisogno sembrava qualcosa di simile data-bind="click:$parents[1].onCardClick"