klicken Sie auf das übergeordnete Funktion in foreach Bindung

Question

Ich habe folgende html:

<div data-bind="foreach: Contacts"> 
    <a data-bind="click: $parent.Foo($data), text: Name">link</a> 
</div> 
<button data-bind="click: AddContacts">click</button> 

und js Code:

var viewModel = ko.mapping.fromJS({"Selected":null,"Contacts":[]}); 
viewModel.AddContacts = function(){ 
    this.Contacts([{"Name":"C1"},{"Name":"C2"}]); 
} 

viewModel.Foo = function (contact) { 
    alert(contact.Name); 
} 

ko.applyBindings(viewModel); 

Wenn ich auf die Schaltfläche klicken die Foo für jeden Kontakt genannt wird. Ich habe nicht erwartet, dass dies überhaupt aufgerufen wird, bis ein Link geklickt wird.

Answer 1

Wie nemesv gesagt. Der Parameter ist eine Funktionsreferenz. Sie haben also das Ergebnis der Funktion als Klick-Ereignis verwendet.

Der Aufruf an die Funktion, die Sie automatisch die Daten für dieses Element enthalten geben, so dass Sie es nicht manuell übergeben müssen:

<div data-bind="foreach: Contacts"> 
    <a data-bind="click: $parent.Foo, text: Name">link</a> 
</div> 

http://jsfiddle.net/4cUv9/

Answer 2

Der Bindungsparameter click ist eine Funktionsreferenz. So müssen Sie Ihren Anruf in eine anonyme Funktion wickeln:

<div data-bind="foreach: Contacts"> 
    <a data-bind="click: function() { $parent.Foo($data); }, text: Name">link</a> 
</div> 

Also, wenn Sie zusätzliche Argumente in Ihre click übergeben möchten Bindung Sie müssen es wickeln, eine Funktion zu machen. Siehe auch die Beispiele in der click documentation

Der Ausdruck <button data-bind="click: AddContacts"> funktioniert, weil Sie die AddContacts Funktion dort direkt referenzieren.