KnockoutJs: Obtiene el elemento vinculado de una instancia modelo

Question

¿Es posible obtener el elemento (o elementos) correspondiente al que está asociada una instancia de datos (modelo)?

Por ejemplo, tengo una matriz de tiendas de objetos 'Person' en una propiedad de ViewModel.

Ato el ViewModel a la vista que la hace, por ejemplo:

<div class="people" data-bind="template: { foreach: people }"> 
    <a href="#" class="person" data-bind="text: name"></a> 
</div> 

entonces Ato algunos controladores de eventos a través de jQuery:

$container.on('click', '.person', function(e){ 
    e.preventDefault(); 
    self.showPerson(ko.dataFor(this)); 
}); 

En mi método showPerson I ahorraría una referencia al modelo. Yo/podría/también a guardar una referencia al elemento, pero no quiero si no es necesario.

self.showPerson = function(person) { 
    // can i get the corresponding element from the 'person' model? 
}; 

¿Alguien tiene alguna idea?

Answer 1

Su sintaxis y uso de $ contenedor con jquery y el segundo argumento de '.person' es unfamil iar a mí, pero en su controlador de clics, ¿no está this el elemento al que se hizo clic? ¿No podrías pasar eso a tu método showPerson también?

$container.on('click', '.person', function(e){ 
    e.preventDefault(); 
    self.showPerson(ko.dataFor(this), this); 
}); 

self.showPerson = function(person, element) { 
    // can i get the corresponding element from the 'person' model? 
}; 

no sé de una manera fuera de la parte superior de la cabeza para obtener los elementos que un observable está obligado a, pero puede haber varios elementos diferentes. Puede tener un cuadro de texto para 'nombre', mostrar el nombre en un lapso, usarlo en una longitud calculada, tener suscriptores y usar nombre(). En un cálculo en otro enlace, por ejemplo.

Dicho esto, si utiliza la versión de depuración de knockout, puede ver que sus observables tienen una propiedad _subscriptions que podría tener lo que está buscando. La versión minificada es un personaje único, creo.

Answer 2

¿Por qué no mueve el enlace de evento click dentro de su foreach?

<a href="#" class="person" data-bind="text: name, click: showPerson"></a>

En este caso, su función showPerson() tendría los datos correctos para person

EDIT:

Lo sentimos, pero supongo que me perdí el núcleo de su pregunta:

self.showPerson = function (person, event) { 
    element = event.srcElement 
    ... 
} 

Answer 3

self.showPerson = function(data, event) { 
    // event.currentTarget is the DOM element 
    // $(event.currentTarget) gives the jQuery element 
} 

Answer 4

Usted puede simplemente crear una unión

// data-bind="element: observable" 
    // sets observable to element .. 
    ko.bindingHandlers.element = { 
     init: function(element, valueAccessor) { 
      var target = valueAccessor(); 
      target(element); 
     } 
    }; 

En su modelo de vista personalizada, crear un 'campo' para almacenar el elemento:

person.el = ko.observable(null); 

Luego, en su plantilla html ..

<div data-bind="element: el"> .... </div> 

Answer 5

Creo que la mejor práctica es t o vincular directamente a una función en el modelo de vista en lugar de adjuntar controladores.

Click binding to parent function in foreach