Just the Useful Stuff https://docs.microsoft.com/archive/blogs/just_the_useful_stuff/feed.xml Wed, 17 Apr 2019 04:09:31 GMT en-US hourly 1 To observe or not to observe? That is the question… https://docs.microsoft.com/archive/blogs/just_the_useful_stuff/to-observe-or-not-to-observe-that-is-the-question Fri, 03 May 2013 14:32:03 GMT https://blogs.msdn.microsoft.com/just_the_useful_stuff/2013/05/03/to-observe-or-not-to-observe-that-is-the-question/ 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:

  • you are going to two-way bind the value to the user interface
  • want to watch when the value changes and act based on it
  • need to extend it for validation purposes

DO NOT use observables when:

  • you are only one-time binding the value
  • you do not need to subscribe to changes in the value

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.

magnifierAlso, 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!

Technorati Tags: ,,
]]> A Quick Comparison Between jsViews and Knockout https://docs.microsoft.com/archive/blogs/just_the_useful_stuff/a-quick-comparison-between-jsviews-and-knockout Tue, 04 Dec 2012 12:56:57 GMT https://blogs.msdn.microsoft.com/just_the_useful_stuff/2012/12/04/a-quick-comparison-between-jsviews-and-knockout/ Both jsViews and Knockout are JavaScript libraries for implementing an MVVM pattern on the client side using the jQuery templates plugin or the later version of same, jsRender.

When trying to choose which of these libraries to use for some projects I made a quick list of the pros and cons of each and thought it might be useful to others when they are doing the same.

So without further delay, here is my list for Knockout so far:

Pros

Cons
Declarative binding for events is easier for some within the templates themselves rather than using selectors and code behind Requires you to use
ko.observable(data) calls to convert your view model data into something usable by the binding engine
Has excellent documentation and examples Requires you to call your view model properties as functions when you access them. If you forget, it breaks the binding and silently fails (at least in the version I was using). This is bad when you assign values and forget to add the parenthesis because you wipe out the observable binding information.
Binding common elements is quite easy and the syntax is simple. Purists will note that declarative event binding within the templates violates separation of concerns

And for jsViews:

Pros

Cons
Uses raw data view models without need of conversion or wrapping Requires explicit “observable” update calls for data changes in code (binding still works without issue… I’d equate this to Knockout requiring parenthesis on all the view model properties because it makes them functions)
Is very lightweight and fast There is little in the way of documentation and there are few samples aside from Boris’ GitHub repository
Uses jsRender out of the box without modification Has no event binding capability (some, including me like using jQuery.on() instead of Knockout syntax for this so this could be a Pro to some)

No matter which of these you choose to use, they both have the MVVM pattern covered if used properly. At present it seems to be a choice based on personal preference. I welcome any comments or suggestions for additions to my lists.

]]>