knockoutjs - bindings with parameters triggered on load

I think "Note 2" on this knockout page explains it all:

http://knockoutjs.com/documentation/click-binding.html

You can avoid the problem by either using:

Anonymous functions:

<button data-bind="click: function(data, event) { myFunction(data, event, 'param1', 'param2') }">Click me</button>

... or ...

The bind method:

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

The following executed the click function on load

click: clickSpan()

removing the brackets as below, the function was not executed onload

click: clickSpan

(this is explained in note 2 above but it was in cryptic form :-)


I ran into this under the following circumstances:

  • I was running Visual Studio 2013.
  • My knockout project was using TypeScript 1.5.
  • I was running my project in chrome using the Visual Studio debugger.
  • I had poorly refactored some code and neglected to recompile or re-run the debugger.

Because of this, I believe what happened was I had bad TypeScript that wouldn't compile, only I wasn't getting any warnings or errors to that effect, and edits that I made to my TypeScript were not getting reflected properly in the auto-generated JavaScript files.

It might be uncommon that others will see this, but, I guess a word of warning is that you might run into this, or other unexpected behavior if you're editing TypeScript in place while running the VS debugger. I suspect that I had created the situation that Mark Robinson described in my auto-generated js files, but I did not see that in my TypeScript.