Site Meter
 
 

Knockout 3.0 Release Candidate available

Last week we published the Knockout 3.0 Release Candidate. Hopefully this is the last prerelease version of KO 3.0! The final release should be out in the coming weeks depending on developer feedback.

What’s new?

The biggest chunk of new v3 functionality was already included in the 3.0 Beta release. The beta included a huge overhaul of the binding system that makes it more powerfully extensible. In particular, this included:

  • Node binding and rewriting which lets you define custom binding syntaxes, and

  • Independent and ordered bindings which fixes the most longstanding difficulties with complex combinations of bindings.

See my beta blog post for details and examples.

Since the beta, we’ve focused mainly on performance, stability, and backward compatibility. Of course, we couldn’t resist including a few new features too… So, new in the release candidate is:

  • Array change subscriptions – a super-fast way to find out how an observable array has changed (i.e., which items were just added/deleted/moved) without having to run any differencing algorithm. See the example later.
  • Binding to detached nodes so frameworks built on top of Knockout have an easier time organizing all the DOM fragments they work with in the background.
  • Clearer error reporting if binding hits a problem. After all, nobody enjoys debugging…
  • More helpful handling of arrays in which each entry is an observable (as distinct from observable arrays, which have of course always worked nicely).
  • Performance improvements
    • Computed properties no longer issue change notifications by default if their computed value is definitely unchanged since last time.
    • Reduced by almost half the number of hidden, internal observables that Knockout constructs to manage the state of your bindings.
    • Reduced the stack depth when processing chained observable notifications by four call frames per observable, permitting much longer chains.
  • Bug fixes including HTML-encoding dropdown-list captions, and reinstating the .toJSON function on the output from ko.toJS (which was inadvertently omitted in KO v3 beta).
  • New build system based on Grunt.js to make contributing to Knockout easier. At last all the custom Bash scripts are gone :)
    • Fun fact: as recently as 9 months ago, Knockout still included an MS-DOS batch-file build system. Ah, the magic of %~dp0

Array change subscriptions

Full docs will be available with the final release, but for now, here’s an example of how to receive array change descriptions with KO 3. This will be useful for anybody processing complex chains of observable arrays, or using them for anything besides binding to the UI (which is already automatic).

Whenever you have an observableArray, you can now subscribe to its new arrayChange notifications:

var myArray = ko.observableArray(["Alpha", "Beta", "Gamma"]);
 
myArray.subscribe(function(changes) {
 
    // For this example, we'll just print out the change info
    console.log(changes);
 
}, null, "arrayChange");

Now if you add/remove/reorder its contents, you’ll be given a concise description of what happened. For example, if you add an item (e.g., changing ['Alpha', 'Beta', 'Gamma'] to ['Alpha', 'Beta', 'Gamma', 'Delta']):

myArray.push("Delta");
// Console output: [{ index: 3, status: 'added', value: 'Delta' }]

Or if you delete an item (e.g., changing ['Alpha', 'Beta', 'Gamma', 'Delta'] to ['Alpha', 'Beta', 'Gamma']):

myArray.pop();
// Console output: [{ index: 3, status: 'deleted', value: 'Delta' }]

Or if you perform a combination of deletions and additions at once (e.g., changing ['Alpha', 'Beta', 'Gamma'] to ['Alpha', 'New value']):

myArray.splice(1, 2, "New value");
// Console output:
// [{ index: 1, status: 'deleted', value: 'Beta' },
//  { index: 1, status: 'added', value: 'New value' },
//  { index: 2, status: 'deleted', value: 'Gamma' }]

Or if you change the order of items (e.g., from ['Alpha', 'New value'] to ['New value', 'Alpha']):

myArray.reverse();
// Console output:
// [{ index: 0, moved: 1, status: 'deleted', value: 'Alpha' },
//  { index: 1, moved: 0, status: 'added', value: 'Alpha' }]

In this last case, notice that as a consumer of this information, you can optionally ignore the moved information and just interpret it as the original Alpha being deleted, and a different Alpha being added to the array’s end. Alternatively you can recognize that the moved information tells you that you can think of the added and deleted items being the same thing just changing position (by matching up the indexes). Either is a valid interpretation – it’s up to you.

So what? I could do this before using ko.utils.compareArrays

Yes, you could, but the benefits of arrayChange are:

  • Performance is O(1) in most cases, i.e., there’s basically no performance implication at all, because for straightforward operations, (push, splice, etc.) KO supplies the change log without running any diff algorithm. KO now only falls back on the diff algorithm if you’ve made an arbitrary change without using a typical array mutation function.
  • The change log is filtered down just to give you the items that actually changed.

Coming soon: A powerful new plugin, built using arrayChange, for efficiently processing chains of maps and filters on observable arrays. Just as soon as I get permission to publish it :)

Please help us by trying it out

We can only release the final Knockout v3 when we have a good level of confidence that it’s as solid and backward-compatible as we expect. To make that happen soon, please try the v3 RC with your existing or new apps and tell us how it goes.

We’ll provide more detailed upgrade information with the final Knockout v3 release, but for now, here a few tips on the (deliberate) breaking changes since v2.3.0:

  • Computed properties now only notify when their output changes. We polled Knockout developers, and the feedback was overwhelmingly in favour of this change. For most developers, this won’t affect you except by making your app perform better. In the rare case where you still want a ko.computed to issue “change” notifications after re-evaluation even if the result is identical to before, you must now configure it using notify like this:

    myComputed.extend({ notify: 'always' });
  • Bindings on a given element now update independently. This is another improvement that KO developers have wanted for a long time. Again, in most cases, it will only affect you by making your app perform better. But if you built custom binding handlers that relied on the undocumented implementation detail that v2.x updates all bindings on the same element at the same time, you may have to stop relying on that detail.

  • optionsCaption now HTML-encodes its output. This is desirable for safety and consistency with every other text-outputting binding (e.g., text). But if you were previously HTML-encoding the string used with optionsCaption, you’ll now have to stop doing so or it will get double-encoded.

Credits

As usual, huge thanks to the team and community members who put the work in to get this implemented and released. Special acknowledgement to Michael Best who designed and built the overhauled binding system (among much more), and to Larry Gordon who instigated the move to Grunt.js. And of course to everyone else who submitted pull requests and issue reports!

32 Responses to Knockout 3.0 Release Candidate available

  1. Ivan

    Great work guys. I’m especially excited about array changes plugin. Although I feel that it should be in the core. I guess it’s to late for v3, but maybe you could integrate it in the next version?

  2. Steve

    Ivan – the arrayChange notifications *are* built into 3.0 core; it’s just the map/filter utilities that are in a plugin. I’d definitely be open to promoting them to core if enough people ask for it.

  3. Tom

    Does KO 3.0 work with Knockout-ES5?

  4. Hi Steve,

    I am really excited about this release! Great and interesting features (and I was already very pleased with the Beta)!

    One minor question is, whether you are planning to provide this RC as a nuget package, as I want to checkout this version as soon as possible, but don’t want to interfere with the way we are loading KO in our project at the moment.

    Thanks!

  5. When someone writes an post he/she keeps the
    image of a user in his/her mind that how a user can know it.
    So that’s why this paragraph is amazing. Thanks!

  6. Tomek G

    Steve, might want to update http://knockoutjs.com to point to this post instead of the 3.0 beta you made a while ago.

    This is right on the homepage when you click ‘details’ for 3.0 prerelease

  7. Daniel

    Great news, Steve!! I will check again Ko for my projects, because I had changed it for Angular some time ago.

    I am really insterested in the new way to create a new binding syntax and looking forward if it is possible to combine the KO with the Google Polymer!

  8. Frank

    Hi Steve – I think the new features in 3.0 are excellent, you have saved me from having to cache computed values so I can detect when they changed. Really grateful.

    I am trying out the ‘arrayChange’ subscription – is there a way in the callback that I can tell that the whole array has been replaced with myObsArr(newData)?

    I would like to handle this event in the ‘normal’ subscription by sending the whole list, so I need to ignore this event in the ‘arrayChange’ subscription method. Is this possible?

  9. Hey I am so glad I found your blog, I really found you by accident, while I was looking on Bing for something else, Anyways I am
    here now and would just like to say thank you for
    a remarkable post and a all round enjoyable blog (I also
    love the theme/design), I don’t have time to browse it all at the moment but I have book-marked it
    and also added in your RSS feeds, so when I have time
    I will be back to read a lot more, Please do keep up the great job.

  10. Conrad

    Hi Steve,
    I’m currently developing my first js application using knockout (started in April). Its a huge thing with currently 79 js classes of which are 53 viewmodel ones with about 7500 lines of code. Last week I replaced my 2.3.0.debug.js with the current rc.debug and can happily tell you that nothing of my application did raise any errors related to the knockout upgrade.
    Because this is my first ko-application, I *might* not have tried all of knockouts deepest secrets yet; but with about 20 custom bindings and about 50 dynamic templates used in any possible way I would say that this release candiate looks very stable to me. :-)
    Thank you very much.
    Conrad

  11. Paragraph writing is also a excitement, if you be familiar with then you
    can write otherwise it is difficult to write.

  12. Every weekend i used to go to see this website, for the reason that i want enjoyment, as this this web page conations actually
    nice funny data too.

  13. John

    Seriously awesome! Thank you for putting so much effort into KnockoutJS!

    I’ve used Knockout for like 9 months and was meanwhile able to push it into a big project at the office! Hopefully KnockoutJS will eventually win the big battle of front end frameworks.

    Big thumbs up guys!

  14. With havin so much content do you ever run into any
    problems of plagorism or copyright violation? My site has a lot of unique content I’ve either created myself or outsourced but it looks like a lot of it is popping it
    up all over the web without my authorization. Do you know any techniques to help stop content from being stolen?
    I’d definitely appreciate it.

  15. I am extremely inspired along with your writing talents as well as with the structure in your
    weblog. Is this a paid subject or did you modify it your self?

    Anyway keep up the nice high quality writing, it’s uncommon to see a great blog like this one these
    days..

  16. I am actually thankful to the owner of this web page who has shared this wonderful piece of writing
    at at this place.

  17. If you’re Ringtone isn’t there you may need a few tips on how to access the Internet.
    Some Chinese news websites said three or four customers were injured.
    6 seconds, topping out at 126mph and returning 43. Companies understood that apps were the next big thing
    to keep in iphone dimensions touch. Check the gallery below for a look at the phone, others might
    like to delve into the development of fiber optic networks, Verizon and other competitors
    of Google. 2m stolen through premium phone lines in
    July alone.

  18. This is my first time visit at here and i am really impressed to read all at one place.

  19. I really love your blog.. Pleasant colors & theme. Did you build this site yourself?
    Please reply back as I’m planning to create my own blog and would love to know where you got
    this from or what the theme is called. Appreciate it!

  20. This is my first time visit at here and i am truly impressed to read all at single place.

  21. Accelerating this process requires careful attention in order to ensure you do
    not risk your health or cause potentially permanent damage
    to your body. Lenses, conversely, are made from high standard plastic
    having ultra-violet defense along with anti-reflection features for improved functionality.
    She looked stunning in a white ivory custom-designed Vera Wang gown with full tulle
    skirt, basque waist and hand-pieced Chantilly lace appliqu on the bodice and train.

  22. meisam

    Great work guys!

  23. I simply could not leave your website prior to suggesting that I really enjoyed the
    standard info an individual supply for your visitors?
    Is gonna be back ceaselessly to check up on new posts

  24. Ross

    Used the arrayChange listener today to update references on other objects every time a particular array is sorted.

    Very nice indeed!!

    cheers

  25. I have been surfing online more than 3 hours today, yet I never found any interesting article
    like yours. It’s pretty worth enough for me. In my opinion, if
    all webmasters and bloggers made good content as you did, the net will
    be much more useful than ever before.

    Here is my weblog Injustice Gods Among Us Hack Download

  26. Convey the ideas you want to express to your readers, make it short,
    concise and direct to the point while maintaining their enthusiasm to read your article.
    You want to send as many targeted viewers as you can to
    your webpages with the idea that they will opt in to your list.

    However, you need to be doing much more than just this.

  27. Today, I went to the beach with my kids. I found a sea shell and gave it
    to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed.

    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

    Also visit my blog … search engine optimization, google.com,

  28. Fantastic post however I was wondering if you could write a litte more on this
    topic? I’d be very thankful if you could elaborate a little
    bit further. Kudos!

    Feel free to visit my website … babyrub.zos.kr (Zelda)

  29. Attractive section of content. I just stumbled
    upon your site and in accession capital to assert that I get actually enjoyed account
    your blog posts. Any way I will be subscribing to your feeds
    and even I achievement you access consistently rapidly.

    my web-site: help desk support interview questions (Noel)

  30. 1

    Aw, this was an incredibly nice post. Taking a few minutes and actual effort to create a great article… but what can I say… I put things off a lot and don’t seem to get
    nearly anything done.

    Look at my webpage … 1

  31. Fantastic blog! Do you have any tips for
    aspiring writers? I’m hoping to start my own site soon but I’m a
    little lost on everything. Would you recommend starting with a free platform
    like WordPress or go for a paid option? There are so many
    options out there that I’m totally confused .. Any suggestions?
    Thanks!

    Also visit my web blog … http://www.freshwaterplumbingmelbourne.com/blocked-drains-melbourne (Karma)

  32. If some one wants expert view regarding blogging and site-building then i suggest him/her to pay a quick visit this blog, Keep up the nice work.

    Here is my weblog London Erotic Massage (http://www.cdssal.co.uk)