Passer le paramètre en utilisant onclick ou un clic en liaison avec KnockoutJS

Si vous configurez une liaison de clic dans Knockout, l'événement est passé comme deuxième paramètre. Vous pouvez utiliser l'événement pour obtenir l'élément sur lequel le clic s'est produit et effectuer toutes les actions que vous souhaitez.

Voici un violon qui démontre: http://jsfiddle.net/jearles/xSKyR/

Alternativement, vous pouvez créer votre propre liaison personnalisée, qui recevra l'élément auquel il est lié comme premier paramètre. Au début, vous pouvez joindre votre propre gestionnaire d'événements de clic pour effectuer les actions que vous souhaitez.

http://knockoutjs.com/documentation/custom-bindings.html

HTML

 <div> <button data-bind="click: clickMe">Click Me!</button> </div> 

Js

 var ViewModel = function() { var self = this; self.clickMe = function(data,event) { var target = event.target || event.srcElement; if (target.nodeType == 3) // defeat Safari bug target = target.parentNode; target.parentNode.innerHTML = "something"; } } ko.applyBindings(new ViewModel()); 

Utilisez une liaison, comme dans cet exemple:

 <a href="#new-search" data-bind="click:SearchManager.bind($data,'1')"> Search Manager </a> 

 var ViewModelStructure = function () { var self = this; this.SearchManager = function (search) { console.log(search); }; }(); 

Je sais que c'est une question ancienne, mais voici ma contribution. Au lieu de toutes ces astuces, vous pouvez simplement envelopper une fonction dans une autre fonction. Comme je l'ai fait ici:

 <div data-bind="click: function(){ f('hello parameter'); }">Click me once</div> <div data-bind="click: function(){ f('no no parameter'); }">Click me twice</div> var VM = function(){ this.f = function(param){ console.log(param); } } ko.applyBindings(new VM()); 

Et voici le violon

Une réponse générique sur la façon de gérer les événements de click avec KnockoutJS …

Pas une réponse directe à la question posée, mais probablement une réponse à la question que la plupart des Googlers atterrit ici ont: utilisez la liaison de click de KnockoutJS au lieu d' onclick . Comme ça:

 function Item(parent, txt) { var self = this; self.doStuff = function(data, event) { console.log(data, event); parent.log(parent.log() + "\n data = " + ko.toJSON(data)); }; self.doOtherStuff = function(customParam, data, event) { console.log(data, event); parent.log(parent.log() + "\n data = " + ko.toJSON(data) + ", customParam = " + customParam); }; self.txt = ko.observable(txt); } function RootVm(items) { var self = this; self.doParentStuff = function(data, event) { console.log(data, event); self.log(self.log() + "\n data = " + ko.toJSON(data)); }; self.items = ko.observableArray([ new Item(self, "John Doe"), new Item(self, "Marcus Aurelius") ]); self.log = ko.observable("Started logging..."); } ko.applyBindings(new RootVm()); 

 .parent { background: rgba(150, 150, 200, 0.5); padding: 2px; margin: 5px; } button { margin: 2px 0; font-family: consolas; font-size: 11px; } pre { background: #eee; border: 1px solid #ccc; padding: 5px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <div data-bind="foreach: items"> <div class="parent"> <span data-bind="text: txt"></span><br> <button data-bind="click: doStuff">click: doStuff</button><br> <button data-bind="click: $parent.doParentStuff">click: $parent.doParentStuff</button><br> <button data-bind="click: $root.doParentStuff">click: $root.doParentStuff</button><br> <button data-bind="click: function(data, event) { $parent.log($parent.log() + '\n data = ' + ko.toJSON(data)); }">click: function(data, event) { $parent.log($parent.log() + '\n data = ' + ko.toJSON(data)); }</button><br> <button data-bind="click: doOtherStuff.bind($data, 'test 123')">click: doOtherStuff.bind($data, 'test 123')</button><br> <button data-bind="click: function(data, event) { doOtherStuff('test 123', $data, event); }">click: function(data, event) { doOtherStuff($data, 'test 123', event); }</button><br> </div> </div> Click log: <pre data-bind="text: log"></pre> 

La documentation de Knockout mentionne également une manière beaucoup plus propre de passer des paramètres supplémentaires aux fonctions liées à l'aide d'une fonction de liaison à l'aide d'un on-click Reportez-vous comme ceci:

 <button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> Click me </button>