Sergun/Knockout-MultiModels. Knock Me Out. Extending Knockout.js - 08/13/2012 - ThatConference. Getting the Most Out of Knockout.js - 10/06/2012 - Twin Cities Code Camp. Knockout utils signatures. Knockout.js Performance Gotcha #1 - if/with bindings are not always cheap - Knock Me Out. Update: Knockout 2.2 has addressed the first issue in this post. Now the if and ifnot binding will not re-render their contents unless the value changes between truthy and falsy. A recent StackOverflow question prompted me to start a series of short posts with some basic performance tips/gotchas for Knockout.js.
In smaller applications, many of these items would go unnoticed, but as a project becomes more complex, it is important to understand the amount of work that Knockout is doing to manage your UI. The control flow bindings introduced in Knockout 2.0 are really just simple wrappers to the template binding. They use the children of the element as their “template” (what we call anonymous templates) and will re-render the contents whenever triggered. Problem: if binding causing frequent re-renders A common scenario where you might use the if binding is when you want to display a section only when an observableArray actually contains items.
Solutions It might look like: Conclusion. Knockout 2.1 is out - Knock Me Out. Knockout.JS 2.1 is now available! Minified and debug versions available here. This release focused mainly on performance improvements and bug fixes after the 2.0 release. Here are some highlights: CommonJS and AMD supportGreat performance improvements to templating - use cloned DOM nodes when possible rather than parsing strings into elements.Support for custom container-less bindingsAbility to extend the binding context in a custom bindingComputed observables no longer can recursively evaluate themselves (I think that has happened to all of us a few times!) $index is available in foreach scenarios from the binding context. For this release Michael Best joined the core team and drove the majority of the changes with Steve. Please report any issues found here. Knockout 2.2.0 released. It’s been five months since the last significant Knockout release, so it’s about time for another!
The core team and many contributors have been hard at work adding some sweet new features, performance upgrades, architectural improvements, and bug fixes. After all this, the final code file is smaller than the previous version You can download Knockout 2.2.0 now from GitHub where we also have the source, and see the updated documentation and test suite. What’s improved? The theme for KO 2.2.0 was “all the small things”. We processed and closed many, many, many work items tracked on GitHub, fixed a bunch of niggly little issues, improved our code structure, and put in some enhancements we’ve been wanting for a while. My favourite enhancement is that the foreach binding will now detect when you have reordered elements in an array, and will simply move the corresponding DOM elements into the new order (previously, a “move” was handled as an “add” and a “delete”).
Other improvements include: Knockout 2.1.0 released. Last night we released version 2.1.0 of knockout.js. This brings a whole bundle of added functionality and performance improvements. For a more detailed rundown of what’s new, see Ryan Niemeyer’s blog post. With this release we welcome new core team member Michael Best, who implemented a lot of the 2.1.0 goodness. One of my favourite new features is the $index context variable. Here’s a short usage example: The cool thing is that $index is an observable and is updated automatically as you add or remove items in any collection bound to a foreach (and so your UI will update to match). We also benefited from pull requests, issue reports, and feature suggestions from many others in the community.
Again, if you want to know more about what’s new in KO 2.1.0, head on over to Ryan’s post for a full rundown. Knockout 2.0.0 released. Here it is at last! Knockout 2.0.0 contains a huge set of improvements since the 1.2.x line. If you’re using KO already, see below for some of the highlights. New to all this? Now’s a great time to check it out. Knockout is an MVVM library for JavaScript – it makes rich dynamic web UIs easier and cleaner to build. What just happened?
The finished 2.0.0 build is now on GitHub All of the documentation and live examples are updated to reflect the new version All of the interactive tutorials are updated too. Credits go to the many community members who contributed pull requests, bug reports, new documentation, and support during this process. Why is it called 2.0.0?
For a long time, we were planning this next version to be called 1.3.0. Quite a few community members are keen on adopting SemVer-style versioning. 2.0.0 is a good place to start (expermentally) with that versioning convention. New features 1. Here’s an example of using “foreach” and “if”: 2. 3. Example: 4. 5. 6. Breaking changes. Utility functions in KnockoutJS - Knock Me Out. When working with KnockoutJS, there seem to be many common operations that you need to perform on your view model objects. Internally, Knockout has a number of utility functions used by the library itself, but many of these functions might actually be handy for anyone using the library.
I wanted to build a sample that highlights a few of my favorite utilities. Handling data from the server One of the first tasks that you typically encounter is converting data from the server to a suitable format for use in Knockout. Suppose, we are provided a JSON string from the server that was not automatically turned into a JavaScript object: Knockout has a utility function ko.utils.parseJson that will attempt to do a JSON.parse if it is available or fall back to evaluating it as a function string for older browsers. Now we have a JavaScript object, but in order to be useful in Knockout, we might need to convert some properties to observables and possibly add some computed observables.
Kamranayub/UnderscoreKO.