KnockoutJs: Holen Sie das gebundene Element aus einer Modellinstanz

Question

Ist es überhaupt möglich, das entsprechende Element (oder die Elemente) zu erhalten, an das eine Daten (Modell) -Instanz gebunden war?

Zum Beispiel habe ich eine Reihe von 'Person' Objekte speichert in einer ViewModel-Eigenschaft.

Ich band das Ansichtsmodell zu der Ansicht, die es macht, zum Beispiel:

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

ich einige Event-Handler über jQuery dann binden:

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

In meiner showPerson Methode würde ich sparen Verweis auf das Modell. Ich könnte/könnte auch einen Verweis auf das Element speichern, aber ich möchte nicht, wenn ich es nicht muss.

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

Wer hat irgendwelche Ideen?

Answer 1

Ihre Syntax und Verwendung von $ container mit jquery und dem zweiten Argument von '.person' ist unbekannt Iar zu mir, aber in Ihrem Click-Handler, ist nicht this das Element, das angeklickt wurde? Könnten Sie das nicht auch an Ihre showPerson-Methode weitergeben?

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

Ich weiß nicht, einen Weg aus der Spitze von meinem Kopf, die Elemente zu erhalten, die eine beobachtbare gebunden wird, aber es könnte mehrere verschiedene Elemente sein. Sie könnten ein Textfeld für "name" haben, den Namen in einem Bereich anzeigen, in einer berechneten verwenden, Abonnenten haben und name() verwenden. Length in einer Berechnung in einer anderen Bindung zum Beispiel.

Das heißt, wenn Sie die Debug-Version von Knockout verwenden, können Sie sehen, dass Ihre Observablen eine _subscriptions Eigenschaft haben, die haben könnte, was Sie suchen. Die verkleinerte Version ist ein einzelnes Zeichen, denke ich.

Answer 2

Warum verschieben Sie nicht die Klickereignisbindung in Ihre foreach?

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

In diesem Fall Ihre showPerson() Funktion würde die richtigen Daten für person

EDIT:

Sorry, aber ich denke, ich den Kern Ihrer Frage verpasst:

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

Sie können einfach eine benutzerdefinierte erstellen

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

Ihrer Ansicht nach Modell verbindlich, erstellen Sie ein 'Feld', das Element zu speichern:

person.el = ko.observable(null); 

Dann in Ihrem HTML-Vorlage ..

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

Answer 5

Ich denke, beste Praxis ist t o binden Sie direkt an eine Funktion im Ansichtsmodell, anstatt Handler anzuhängen.

Click binding to parent function in foreach