Site Meter
 
 

Knockout v2.3.0 released; v3.0.0 beta available

Lots of new goodies for Knockout.js developers today! You can download version 2.3.0 final or 3.0.0 beta from the downloads page right now.

Why two new versions on the same day? The KO team and community has been hard at work preparing for the next phase of the library’s evolution, and we decided to roll it out in the form of a choice:

  • Get v2.3.0 if you just want all the bugfixes, perf improvements, and small features we’ve added in recent months. This is ideal for existing production apps.
  • Get v3.0.0-beta if you want the kickass new binding system (plus all the v2.3.0 enhancements) which has tonnes of powerful new extensibility potential. It’s almost-but-not-100% back-compatible with the older system – details below.

What’s new in 2.3.0?

Although KO 2.3.0 is primarily a package of compatibility/performance improvements and bugfixes, we sneaked in a few new features too:

  • ko.observable, ko.computed and other non-DOM-related parts of KO can now run on the server in Node.js. NPM package available.
  • The options binding has been rebuilt and made much smarter:
    • It now inserts and removes <options> nodes incrementally (rather than recreating them all) as your underlying array changes, leading to much better performance on older browsers.
    • A new optionsAfterRender callback lets you add custom code to modify <options> nodes as they are added to the document, in case you need this to interoperate with third-party DOM libraries
  • The template binding now allows use of an observable template name. This gives you an extra way of switching templates dynamically at runtime.
  • The css binding now allows use of any legal CSS class name. Previously it didn’t allow dots or slashes in class names.
  • ko.unwrap is the new, shorter name for ko.utils.unwrapObservable. Don’t worry – the old name still works too!

Bugfixes and compatibilty/perf improvements include:

  • KO will now warn you with an error if you try to apply bindings to the same element more than once (this was always an error; we just didn’t report it before)
  • The hasfocus and options bindings now work around additional edge-case browser quirks, e.g., during page load when running in an iframe in IE9 in compatibility mode (seriously!). This gives you a more consistent developer experience.
  • Observable arrays have better handling of unexpected parameters (for example, when initialized with non-array values).
  • The template binding now has more predictable handling of malformed HTML markup
  • ko.toJS now usefully handles String/Number/Boolean object-type properties (as opposed to string/number/bool primitives, which have always worked)
  • ko.computed now recovers from exceptions thrown during your evaluation callback. Previously, an evaluator exception would stop all future updates for that ko.computed.
  • Better whitespace handling in string-based templates (e.g., you can now put spaces around the equals character in data-bind = '…', if you care about that kind of thing).
  • General perf improvements (e.g., we avoid evaluating scrollTop when not absolutely necessary, as it triggers a rendering reflow).
  • More than 20 bugfixes for minor issues

Along the way, we improved some of the KO engineering processes to help us keep the momentum and stability high:

  • Ported all specs to the excellent Jasmine testing framework (thanks Chris!), so they can run in a wider range of environments
  • Simplified build system by removing all batch files
  • Automatic test runners everywhere!
    • The build script now runs all specs in PhantomJS if installed
    • The build script also runs specs for the Node-compatible subset of KO directly in Node (not via PhantomJS).
    • All specs run in all supported browsers (even IE6 and Safari for iOS 5 :) ) on every push to GitHub thanks to the excellent Testling service.

For a more detailed list, see the 2.3.0 release notes page.

What’s coming in 3.0.0?

v3 is a forward-looking release that focuses on how KO binds your models to your DOM:

  • It aims to open up powerful new extensibility possibilities at the heart of KO’s binding system. This means, for example, you can define your own new custom markup syntaxes.
  • Along the way, it fixes some longstanding complications in the binding mechanism. For example, it guarantees that bindings update independently and in the desired relative order, so there’s much less scope for surprising edge-case behaviors.

So, how does that actually look?

Node and binding rewriting

With v3, advanced KO developers can define custom syntaxes by providing callbacks that rewrite DOM nodes and binding strings during the binding process.

As an example of a node rewriter, here’s a custom binding syntax I just put together. It lets you write {{ expr }} to insert the value of arbitrary viewmodel expressions in your DOM, so that you rarely need to bother using the text binding. Because of how node rewriting works, it automatically has full support for observable values, being embedded in foreach loops etc.:

Such syntaxes can be distributed as KO plugins. Popular ones might end up in KO core.

Many more advanced scenarios are possible. For example, developers could create a “widgets” plugin that rewrites custom elements such as <orderLine> with the output from some other markup defined in <template id='orderLine'>…</template>.

Independent and ordered bindings

Until v3, if you had a binding like this:

<input type="checkbox" data-bind="visible: needsTerms, checked: acceptsTerms" />

… then any changes to needsTerms would cause both visible and checked to be re-evaluated, so the “checked” state of the checkbox would be reapplied. That’s rarely a problem, but it’s not great for performance and there were some rare edge cases where custom and even built-in bindings could interact in unexpected ways.

Also, the order in which bindings were applied was given by their left-to-right order in your binding attribute (so in this case, visible was applied before checked). Again, that’s almost always OK, and usually what you actually want. But again there could be edge-case scenarios with custom or even built-in bindings interacted in unexpected ways depending on order.

v3 fixes this by ensuring that bindings only refresh when their bound model state has changed at a more fine-grained level. So in the above example, changing needsTerms would not cause checked to refresh. Also v3 lets bindings declare order dependencies, so if for some reason it was important for checked to run before visible, we could ensure that it does, regardless of the order you write them in your binding attributes.

Backward compatibility

As always, we’ve taken back-compat very seriously. Knockout v3.0.0 is intended to be fully backward-compatibile with applications built for KO 2.x with one necessary exception:

  • v2.x’s behavior about dependencies between bindings (described in the section about “Independent and ordered bindings” above), is an undocumented internal implementation detail so hopefully you aren’t relying on it. But if you are relying on that then obviously you will see a change of behavior because bindings are independent in v3 by design. You’ll need to stop relying on cross-binding dependencies, which by the way will make your code much cleaner and easier to understand.

Please try v3.0.0 beta with your apps, and let us know if you discover any unexpected changes of behavior. That’s what the beta is for :) .

Credits

As always, big thanks to the KO community and core team for the work involved in producing this. In particular, most of the v3 binding enhancements were designed and implemented by Michael Best in Hawaii. The migration of specs to Jasmine was led by Chris Price in Newcastle. You can thank Ryan Niemeyer who wrote a large portion of the new docs in Wisconsin. Numerous fixes came from Matteo Pagliazzi in Italy. Lots of other people helped too – see GitHub for the full log!

53 Responses to Knockout v2.3.0 released; v3.0.0 beta available

  1. Kim Tranjan

    Seriously, I’m very happy to see the great evolution of Knockout! :)

  2. Tim Bertenshaw

    Excellent news, is the nuget package due soonish?

    Tim

  3. Kostas Saidis

    Great work, guys!

    Especially the v3 enhancements to support custom syntaxes is a great step ahead :)

    Keep on rocking…

  4. Haven’t looked at source yet, but what of the knockout-es5 plugin, still need to add it separately when using 2.3/3.0?

  5. The binding re-writing can also be applied to the value of specific bindings. Here I’ve taken your example and expanded it to support a filter syntax: http://jsfiddle.net/mbest/mAnHH/. Now you can use `{{ name | uppercase }}` instead of `{{ name.toUpperCase() }}`.

  6. Danny Bueno

    I noticed the non-independent bindings “issue” causing problems when I had “with” bindings along side other ones. I kept having to separate them. Looking forward to v3!

  7. Steve, this post doesn’t have the Knockout category and so is missing from http://blog.stevensanderson.com/category/knockout/

  8. Rob

    @Michael

    Very cool. I really want to have filters in Durandal, so I may use your code as a starting point to add it. Speaking of that, you’ve got a typo in your lowercase filter in that it calls toUpperCase.

    @Steve

    I was looking to update some projects today that are using Nuget. But I don’t see 2.3.0 on nuget yet. It would be really nice to have that.

  9. Steve

    > [Rob] but what of the knockout-es5 plugin, still need to add it separately when using 2.3/3.0?

    Yes, the plan is to keep that as a separate plugin for now. Part of the overall plan is keeping the core light and focused.

    > [Michael] Steve, this post doesn’t have the Knockout category

    Thanks – fixed!

    > [Tim] Excellent news, is the nuget package due soonish?
    > [Rob] But I don’t see 2.3.0 on nuget yet.

    Thanks for the reminders! Have just uploaded 2.3.0 to NuGet.

  10. @Rob

    I’ve been working on filters (and a bunch of other cool binding enhancements) that I’ll be releasing soon as a plugin. I’ve updated the example to use the updated filter code.

  11. Andrew

    please can you link to these what’s new posts from the downloads page. having to scour the webs for them makes me sad. (unless of course there is already a link which I can find, which makes me even more sad)

    thanks for the hard work.

  12. Noel Abrahams

    Just dropped StringInterpolatingBindingProvider into the project, and started wrting {{label}}.

    Simple as that.

    Excellent work, chaps!

  13. I say wow. I am thinking about migrating is there any comparison between ko, backbone and angular.

  14. Whatever your specialty or favored photographic genre may be, photogenic scenes,
    people, places and ideas are all around you almost constantly.
    Take the low-carb tortilla or wrap and put about a tablespoon or two of cream on
    it. Waldorf salad is one such salad that is an amalgamation of celery, apples, walnuts, and mayonnaise.

  15. kishore

    You cannot apply bindings multiple times to the same element.

    i am getting above error, but i am not binding multiple times to same element.
    Can you give example, scenario y this error comes.

  16. kishore

    I am trying to apply slidejs to elements to which data-bind is used for populating some img src data. slidejs is not working because of error as mentioned previously.
    could you help me solving this. in KO 2.3.0 v

  17. Hey, I noticed the non-independent bindings “issue” causing problems when I had “with” bindings along side other ones. I kept having to separate them. Looking forward to v3.

  18. Raymond

    Hello,

    Very nice work on v3. I’ve just started to look at KnockoutJS and I’m liking what I’ve seen thus far.

    I like the idea of being able to create filters and I think this should be a built in feature of KO. e.g. data-bind=”text: name | uppercase | anotherfilter”. Filter could even take paramters:

    data-bind=”text: amount | decimal 2″

    I also like the {{label}} idea but I’m cautious about it been a secuity issue when build web sites or applications that use KO to support progressive enhancements. For example a web site might allow the user fill out a form then display the form information on another page that uses KO. This would allow the a web user to perform an XSS attack:

    User might input something:

    My name is {{ alert(‘XSS attack’) }}
    Hello {{ do.some.evil.js.here }}

  19. Great work! we are so excited about the Knockout progress!

  20. Hi Steven. I would like to know, will there be work to increase the performance of the rendering engine in knokoutjs (Angularjs renders large volumes of information faster than knokoutjs)?

  21. Bart

    you currently have this type of markup on an asp.net mvc application to bind model to knockout and have wonderfull validations using DataAnnotations.

    @Html.LabelFor(m => m.InvoiceNumber)
    @Html.TextBoxFor(m => m.InvoiceNumber, new { data_bind = “value: model.invoiceNumber” })
    @Html.ValidationMessageFor(m => m.InvoiceNumber)

    unfortunately, this wonderland falls when you are inside a template or foreach loop like

    because you will have this kind of markup inside

    you already know all this, I’m wondering if there’s any plan to include something that will map de models to a knockout markup with extends and retrieve the validation from the model metadata. I know breeze does have this kind of implementation but actually their focus is not on this. I would love to see a standard way to do model validation on knockout and have ‘somehow’ include this metadata on the knockout model easily. Is there any plan for this? I know it can be accomplished, not sure how much work will be.

    I’m also considering knockout to have a standard way to add model validation so you can use it outside the asp.net world.

    thanks for your response.

  22. Bart

    html code removed, hope you still get the point

  23. Ali

    Revolutionized how we work at Concep. Thanks for KO and it’s great to see it evolve all the time!

  24. I’m very happy with observable template name binding!

    Previously I have build custom binding (http://stackoverflow.com/a/14852898/133408) , which sometimes caused flickering, will test new binding soon.

  25. Wow, awesome blog layout! How long have you
    been blogging for? you made blogging look easy. The overall look of your web site is wonderful,
    as well as the content!

  26. It is good you thought of backward-compatibility with applications built for KO 2.x. Great article, the system looks pretty easy for understanding.

  27. Mic

    Hi,
    Could you provide some examples with TypeScript and Knockout.

    Mic

  28. Thai

    I learned KO before angular and now I’m trying to use angular in an existing page which uses jQuery 1.3.2 (unfortunately I’m not allowed to upgrade to a better jQuery version). Angular uses some kind of jQuery internally, so if it detects that our page already has jQuery it won’t use its own jQuery. With an old jQuery version like 1.3.2 some weird, undesirable behaviors appear.

  29. Very vool articles steven. Many thanks!

  30. Wow, thanks for your work! It’s great Knockout shows progress!

  31. Hey are using WordPress for your blog platform? I’m new
    to the blog world but I’m trying to get started and create my own.
    Do you need any html coding knowledge to make your
    own blog? Any help would be really appreciated!

  32. Adrián

    observable template name rocks!

  33. Chris B

    I love the changes for 3.0.0! Also thanks for not abandoning the 2.x branch. Awesome work, keep the goodies coming please!

  34. You want me to stay with you as I was considering going to Angular.

    Good Job. Expecting many more improvements for that next evolution.

  35. Great info. Lucky me I came across your blog by accident (stumbleupon).
    I’ve saved it for later!

  36. Just wish to say your article is as astonishing. The clarity in your post
    is simply great and i can assume you are an expert on this subject.
    Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post.
    Thanks a million and please continue the rewarding work.

  37. yaniv

    Nice Work ! i just love knockout.

  38. RCNet

    Great job guys! More power to Knockout. :)

  39. Pingback: Knockout 3.0 Release Candidate available - Steve Sanderson’s blog - As seen on YouTube™

  40. Awesome article, I love your blog too! Keep it up.

  41. Many thanks a lot to get giving the following with individuals you really identify what you’re really mentioning! Saved as a favorite. I implore you to likewise consult with my personal internet site Equals). We will employ a website link alter plan between us all

  42. “Knockout v2.3.0 released; v3.0.0 beta available – Steve Sanderson’s blog – As seen on YouTube™” was a great
    post and therefore I really was quite joyful to find it. Many thanks-Lydia

  43. Fantastic post but I was wondering if you could write a litte more
    on this subject? I’d be very grateful if you could elaborate a
    little bit further. Kudos!

  44. Knockout is starting to become a force to be reckoned with!

  45. 很喜欢konckoutjs的绑定风格.效率很高.

  46. It’s very straightforward to find out any matter on net as compared
    to books, as I found this piece of writing at this web page.

  47. Hello, I think your blog might be having browser compatibility issues.
    When I look at your blog site in Chrome,
    it looks fine but when opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up!
    Other then that, very good blog!

  48. Great going! Some very solid improvements, too. Keep up the good work!

  49. Aw, this was an incredibly good post. Taking the time and actual effort to generate a top notch article… but what can I say… I
    put things off a whole lot and don’t seem to get anything done.

  50. Shaun Rowan

    Looks great! Any idea on the performance implications of the {{Foo}} binding?

  51. I take pleasure in, lead to I discovered just what I was having a
    look for. You’ve ended my 4 day long hunt!
    God Bless you man. Have a nice day. Bye

    my web site: CSR Racing Hack, http://Www.Youtube.com/,

  52. I like what you guys are usually up too. This kind of clever work and coverage!
    Keep up the awesome works guys I’ve incorporated you guys
    to our blogroll.

  53. cant keep up with all these releases! Keep em coming though.