Passing parameter using onclick or a click binding with KnockoutJS

Question

I have this function   function make place      place innerHTML    somthing      I used to do this with plain JavaScript and html    lt button onclick  make this parent   gt click me lt  button gt    How can I do this using idiomatic knockout js

User · Answer

A generic answer on how to handle click events with KnockoutJS     Not a straight up answer to the question as asked  but probably an answer to the question most Googlers landing here have  use the click binding from KnockoutJS instead of onclick  Like this    x000D   x000D  function Item parent  txt    x000D    var self   this  x000D     x000D    self doStuff   function data  event    x000D      console log data  event   x000D      parent log parent log       n  data       ko toJSON data    x000D       x000D     x000D    self doOtherStuff   function customParam  data  event    x000D      console log data  event   x000D      parent log parent log       n  data       ko toJSON data       customParam       customParam   x000D       x000D     x000D    self txt   ko observable txt   x000D    x000D   x000D  function RootVm items    x000D    var self   this  x000D     x000D    self doParentStuff   function data  event    x000D      console log data  event   x000D      self log self log       n  data       ko toJSON data    x000D       x000D     x000D    self items   ko observableArray   x000D      new Item self   John Doe    x000D      new Item self   Marcus Aurelius   x000D        x000D    self log   ko observable  Started logging       x000D    x000D   x000D  ko applyBindings new RootVm     x000D   parent   background  rgba 150  150  200  0 5   padding  2px  margin  5px    x000D  button   margin  2px 0  font-family  consolas  font-size  11px    x000D  pre   background   eee  border  1px solid  ccc  padding  5px    x000D   lt script src  https   cdnjs cloudflare com ajax libs knockout 3 4 0 knockout-min js  gt  lt  script gt  x000D   x000D   lt div data-bind  foreach  items  gt  x000D     lt div class  parent  gt  x000D       lt span data-bind  text  txt  gt  lt  span gt  lt br gt  x000D       lt button data-bind  click  doStuff  gt click  doStuff lt  button gt  lt br gt  x000D       lt button data-bind  click   parent doParentStuff  gt click   parent doParentStuff lt  button gt  lt br gt  x000D       lt button data-bind  click   root doParentStuff  gt click   root doParentStuff lt  button gt  lt br gt  x000D       lt button data-bind  click  function data  event     parent log  parent log       n  data       ko toJSON data       gt click  function data  event     parent log  parent log       n  data       ko toJSON data      lt  button gt  lt br gt  x000D       lt button data-bind  click  doOtherStuff bind  data   test 123    gt click  doOtherStuff bind  data   test 123   lt  button gt  lt br gt  x000D       lt button data-bind  click  function data  event    doOtherStuff  test 123    data  event      gt click  function data  event    doOtherStuff  data   test 123   event     lt  button gt  lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D  Click log  x000D   lt pre data-bind  text  log  gt  lt  pre gt  x000D   x000D   x000D        A note about the actual question      The actual question has one interesting bit      Uh oh  Modifying the DOM     place innerHTML    somthing    Don t do that  Don t modify the DOM like that when using an MVVM framework like KnockoutJS  especially not the piece of the DOM that is your own parent  If you would do this the button would disappear  if you replace your parent s innerHTML you yourself will be gone forever ever     Instead  modify the View Model in your handler instead  and have the View respond  For example    x000D   x000D  function RootVm     x000D    var self   this  x000D    self buttonWasClickedOnce   ko observable false   x000D    self toggle   function data  event    x000D      self buttonWasClickedOnce  self buttonWasClickedOnce     x000D       x000D    x000D   x000D  ko applyBindings new RootVm     x000D   lt script src  https   cdnjs cloudflare com ajax libs knockout 3 4 0 knockout-min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D     lt div  data-bind  visible   buttonWasClickedOnce    gt  x000D       lt button data-bind  click  toggle  gt Toggle  lt  button gt  x000D     lt  div gt  x000D     lt div data-bind  visible  buttonWasClickedOnce  gt  x000D      Can be made visible with toggle    x000D       lt button data-bind  click  toggle  gt Untoggle  lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you set up a click binding in Knockout the event is passed as the second parameter   You can use the event to obtain the element that the click occurred on and perform whatever action you want   Here is a fiddle that demonstrates  http   jsfiddle net jearles xSKyR   Alternatively  you could create your own custom binding  which will receive the element it is bound to as the first parameter  On init you could attach your own click event handler to do any actions you wish   http   knockoutjs com documentation custom-bindings html  HTML   lt div gt       lt button data-bind  click  clickMe  gt Click Me  lt  button gt   lt  div gt    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

User · Answer

I know this is an old question  but here is my contribution  Instead of all these tricks  you can just simply wrap a function inside another function  Like I have done here    lt div data-bind  click  function    f  hello parameter       gt Click me once lt  div gt   lt div data-bind  click  function    f  no no parameter       gt Click me twice lt  div gt   var VM   function       this f   function param        console log param          ko applyBindings new VM       And here is the fiddle

User · Answer

Knockout s documentation also mentions a much cleaner way of passing extra parameters to functions bound using an on-click binding using function bind like this    lt button data-bind  click  myFunction bind  data   param1    param2    gt      Click me  lt  button gt

User · Answer

Use a binding  like in this example    lt a href   new-search  data-bind  click SearchManager bind  data  1    gt    Search Manager  lt  a gt    var ViewModelStructure   function          var self   this      this SearchManager   function  search            console log search

[javascript] Passing parameter using onclick or a click binding with KnockoutJS

Examples related to javascript

Examples related to html

Examples related to knockout.js

Examples related to onclick