KnockoutJS – what I’ve learned so far

Posted by

I have been using KnockoutJS at work for the last few weeks and thought it might be an idea to blog about my findings whilst using KnockoutJS within an MVC 4 project, so here goes: –

  • With KnockoutJS you can get a really slick user experience if you show discipline in structuring your code, you can separate out your concerns using unobtrusive JavaScript – i.e. don’t put your JavaScript in the HTML, yes add data-bind attributes but that should be all you need, your JavaScript can be referenced from a file within a JS folder or similar keeping your HTML clean and free from being polluted by lots of inline JavaScript.

  • If you’re wondering how you go about going from your MVC model and working with this in KnockoutJS then look no further than KnockoutJS mapping. This plugin will take your existing Model from c# and convert it into what you will use within KnockoutJS, for example if in your model you have a string[] defined like so:-

    public string[] EmailAddresses { get; set; }

    then the mapping plugin converts this to an observableArray, and if you have a simple string property such as: –

    public string Email { get; set; }

    then the plugin will map this to a knockout observable for you.

  • When using ObservableArrays note that the number of items in the array is tracked – not the actual values within the array – this is important if, if the front end requires updated to the values within the array then you need to make the items within the ObservableArray observable also.

  • Take a look at the ko.utils code mentioned here for some hidden gems when working with KnockoutJS.

  • Dont store a lot of information in observables if you don’t have to, it’s not a good idea to store 10,000 records in an observable array and then bind that to a grid (Only store what you need in observables)

  • It can be a good idea to display on your page the contents of your viewmodel whilst you’re debugging so you can see what the observable and observable arrays you’re using contain

    <div id="debug" style="clear: both">
        <hr />
        <div data-bind="text: ko.toJSON($data)" />

  • More soon as I use it more and more, hope that helps.


  1. Thanks for this post. I’m in a similar situation – just getting used to the world of MVC4 + Knockout.

    We’re currently including script tags in the html templates that we pull in dynamically through MVC4. We then wipe out our main content block and replace it with these HTML templates, giving the user a “single page app” feel, with no postback as they navigate the menus.

    How would you suggest including our external javascript classes and view models using this approach?

    1. We have c# models that get converted into ko using ko mapping plugin. We use coffeescript to create our external javascript and then use chirpy to munge it into one file and then reference that one file in our layout. Try to avoid javascript tags in your html and place them in external files and reference them once they are minified.

  2. In regards to using unobtrusive javascript and having a seperate JS file, and using the mapping extension to map your MVC viewmodels to your knockout viewmodels, how did you reference the MVC viewmodels in your js file?

    Did you have to put the MVC viewmodels in like a hidden variable in your HTML or something?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s