Error with .getbindingAccessors about tko

[brianmhunt]

Awesome!

Unfortunately we don't have a native JavaScript compiler anymore - so some code in data-bind strings will not work.

Fortunately the workarounds are easy in this case. You can change the binding to

1. on.click: window.href. ... or
2. click: => window.href. ...

Ie change the function to an "on" event binding, or to a lambda. (Incidentally the above options should be identical - except the on.click option is backwards-compatible with ko 3.x and punches).

Sorry the parser in tko doesn't handle the function call - it's definitely one of the legacy issues that would be nice to have a work around for.

I will think about it for the next alpha since I think this will be a common issue.

[jlaustill]

As time has gone on, I have actually started second guessing how to use these bindings. I've started moving them all to functions internal to my viewmodels, like this

<li data-bind="click: goToSearch"></li>

and moving the code to my viewmodel like

var goToSearch = function () {
    window.location.href = '/#/Forum/Details?terms=' + encodeURIComponent(appVM.terms.peek());
}

Would this work in tko? Or would I still need to use the on.click or the arrow function? I'll play with it and see what I come up with. I'm not a fan of putting javascript like this in the dom anymore at all. I wrote this code when I was first figuring knockout out.

[brianmhunt]

Yeah tko should work exactly like ko for the function references on the view models (or binding context or options.globals/window)

The hope is that tko will encourage moving away from (complex) code in the dom.

[jlaustill]

So this worked for this binding, then I ran into another one where I need to pass in a parameter. Basically, it's a paging binding that adds first, back, 1, 2, 3, 4, 5, next, last buttons. My binding looks like this

data-bind="click: function () {goToPage(pg)}"

and that pg is simply a number. How in TKO should I pass in that paramter if I can't use a function literal? Will it support the .bind syntax? Or is there a totally new way to go about it? This has actually been one of the most frustrating parts of ko since I started using it. It seems super common to build lists with a foreach and want to call a function with either an index value or a value from the object, such as userId, or postId, messageId, etc etc. I'm all up for a better way to handle these...

[brianmhunt]

Try this:

data-bind="click: => goToPage(pg)"

Tko supports "naked lambdas", being the ES6 lambda syntax of () => /* declaration */, but without the arguments i.e. => /* declaration */.

[jlaustill]

Ok, I like this syntax! If it's one of the only non backward compatible issues, I think I could live with it. It only took me about 15 minutes to go through my entire intranet and search and replace all of these. And boy does it look cleaner!

I think that closes this issue, onto new ones :)

[brianmhunt]

🍰!