Lately I’ve been doing a lot of work using KnockoutJS and Durandal. I’ve noticed that many developers fall into a pattern of using observables everywhere in these kinds of applications so I thought it might be good to point out when that is appropriate and when it is not.
There are lots of nifty uses for observables in these types of applications, but one needs to remember that there is a cost to using them. So I am going to make a quick cheat sheet below explaining when to use an observable and when not to.
DO use observables when:
DO NOT use observables when:
I have seen people using observables all the time which slows your pages down and causes more memory consumption. The general rule of thumb is only use observables in the types of scenarios above. Normal variables are fine for other cases.
Also, while reviewing lots of others’ code I have noticed a habit of people calling the observable within their KnockoutJS templates. This causes the output to lose its observable nature and effectively converts it to a one-time binding. Like so:
WRONG: <div data-bind=”visible: someVarIsTrue()”>
RIGHT: <div data-bind=”visible: someVarIsTrue”>
WRONG: <div data-bind=”visible: someProperty.subObject()”>
Generally any time you have a set of parenthesis within your binding you are doing it wrong. If you need to do that you should probably look at using computed properties or adding custom bindings for these scenarios.
Hopefully this helps clear up some of the confusion around using observable variables with KnockoutJS and other frameworks. Please feel free to point out anything I missed and I will update the post. Enjoy!