KnockoutJs: Pobranie związanego elementu z instancji modelowej

Question

Czy jest w ogóle możliwe uzyskanie odpowiedniego elementu (lub elementów), do którego powiązano instancję danych (modelu)?

Na przykład mam tablicę obiektów obiektów "Person" w właściwości ViewModel.

wiążę viewmodel do widoku, który czyni to np

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

I następnie powiązać niektóre obsługi zdarzeń za pomocą jQuery:

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

W mojej metody showPerson chciałbym zapisać odniesienie do modelu. Ja/może/też zapisuję odniesienie do elementu, ale nie chcę, jeśli nie muszę.

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

Ktoś ma jakieś pomysły?

Answer 1

Twoja składnia i użycie $ container z jquery i drugim argumentem ".person" to unfamil iar do mnie, ale w twojej obsłudze kliknięcia nie jest kliknięty element? Nie możesz przekazać tego również swojej metodzie showPerson?

$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? 
}; 

Nie wiem o sposób od szczytu głowy, aby uzyskać elementy zauważalny jest związany, ale może to być kilka różnych elementów. Możesz mieć pole tekstowe dla "nazwy", wyświetlać nazwę w rozpiętości, używać jej w obliczeniach, mieć subskrybentów i używać nazwy() .długość w obliczeniach na przykład w innym powiązaniu.

To powiedziawszy, jeśli używasz wersji nokautu do debugowania, możesz zauważyć, że Twoje obserwowalne mają właściwość _subscriptions, która może mieć to, czego szukasz. Wersja zminiaturyzowana to jakaś pojedyncza postać, którą myślę.

Answer 2

Dlaczego nie przenieść powiązania zdarzenia kliknięcia w swoim foreach?

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

W tym przypadku czynność showPerson() miałaby poprawne dane dla person

EDIT:

Przepraszamy, ale myślę, że brakowało mi rdzeń zapytanie:

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

Można po prostu utworzyć niestandardowy wiążącej

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

w widoku modelu, stworzyć 'pole', aby zapisać element:

person.el = ko.observable(null); 

Następnie w szablonie html ..

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

Answer 5

Myślę, że najlepszą praktyką jest t o wiążą się bezpośrednio z funkcją w modelu widoku, zamiast załączać procedury obsługi.

Click binding to parent function in foreach