knockoutjs - bindings with parameters triggered on

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 click: testMethod then the action fires when the button is clicked.

As you can see in this fiddle http://jsfiddle.net/kxTzM/ when you setup the binding to click: testMethod('hi') the action fires both when the button is clicked and on page load (I'm guessing on applyBindings)

Having a parameter isn't necessary to reproduce the problem, if you change the binding to click: testMethod() in the first fiddle, you see that it is triggered on page load.

While, yes, I could add another attribute to the element and attempt to use that as a parameter, my question is, is there a way to pass parameters to knockoutjs bindings without triggering them onload. If this is a bug, so be it, however I just want to know a way to avoid it.

Answer 1

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 2

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