knockoutjs click binding no funciona en foreach anidado

Así que tengo un problema realmente extraño con un enlace de clic knockoutjs que no se adjunta a las etiquetas de anclaje. Otro enlace de datos = "" funciona pero no el enlace de clic.knockoutjs click binding no funciona en foreach anidado

A continuación se puede ver el código HTML y parte de los js ViewModel archivo

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>

Básicamente se trata de una ventana emergente modal y su carga cuando el usuario hace clic en un enlace en la página. puedo enviar una solicitud al servidor y me devuelve una lista de Contenedores Tag cada tienen la letra inicial y una lista de etiquetas que se rindió por debajo de la carta como esta: Un una palabra 1 una palabra 2 B b palabra 1 b palabra 2 C palabra c 1 c palabra 2

y así sucesivamente ...

las letras son representados correctamente a, B, C y cada uno obtiene la lista de etiquetas correcta rendido por debajo de ellos con texto: título que se muestra correctamente.

Todo funciona excepto el addFilter(); función que quiero vincular a cada enlace en el taglist. El navegador simplemente salta y agrega un carácter hash a la url. Firebug tampoco muestra ningún error en los enlaces.

La razón por la que el contenedor div tiene un con: searchViewModel es porque hay un modelo de vista maestro para toda la página. Pero esto no debería importar, ya que está trabajando en todas las demás páginas del proyecto.

Lo único que se me ocurre es que el enlace de enlace $ root.addFilter es incorrecto, pero probé simplemente addFilter donde firebug muestra el error "addFilter is not defined;"

Y probé tanto $ parent como $ root.

¿Alguien tiene alguna sugerencia?

Fuente

2012-05-15 Kimpo

¿Podría explicar cómo lo resolvió, lo agradecería mucho. –

Una idea que he tenido. Su función addFilter espera un parámetro (tag) pero no lo están transmitiendo nada en la unión:

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

Podría ser este el problema?

Tal vez algo en la línea de:

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

ayudaría?

Fuente

2012-05-15 11:29:11

Desafortunadamente, no funciona obtener $ parent.addFilter no es una función probada con $ root aswell. Pero sí me dio una idea, intentaré algunas cosas con ese enfoque. – Kimpo

Todavía no tengo suerte, estoy usando el clic: addFilter en otras partes de la página donde puede agregar filtros de búsqueda y los $ datos generalmente no son necesarios si está llamando a una función al iterar a través de una matriz observable – Kimpo

ese. Usted dice que "Firebug no muestra ningún error en los enlaces tampoco."Esto implicaría que se está llamando a su función addFilter, de lo contrario se generaría un error. ¿Ha intentado poner un punto de interrupción en la función addFilter (creo que Chrome es muy bueno para depurar el knockout) y ver si hay algún problema dentro de la función? inspeccione qué se pasa en el parámetro de etiqueta y vea si ese es el problema. –

Me encontré con algo similar y al principio ejecuté data-bind="click:function() { console.log($parents) }". Tenga en cuenta que es $parents no $parent. Miré para encontrar el contexto, y el que necesitaba se parecía a data-bind="click:$parents[1].onCardClick"

Fuente

2014-10-01 15:09:07 Xerri

Xerri ofreció una solución muy viable, me quedé atrapado en exactamente la misma situación y resolvió mi problema. El único cambio que hice fue poner paréntesis data-bind = "click: $ parents [1] .onCardClick() y funcionó como charm. –

knockoutjs click binding no funciona en foreach anidado

Respuesta

Cuestiones relacionadas