knockoutjs - bindings with parameters triggered on load

Question

I\'ve been doing a lot of knockoutjs lately, and I came across a strange occurence.

As you can see in this fiddle http://jsfiddle.net/hqXjv/ when you set up a binding to

Answer 1

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 :-)

Answer 2

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.

Answer 3

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>