Knockout and JavaScript Tips | John Papa

John Papa

Evangelist on the loose

Knockout and JavaScript Tips


Building JavaScript apps or SPA’s with Knockout and interested in taking those skills up a notch? Then check out my new course Essential Knockout and JavaScript Tips, at Pluralsight. By the end of this course you will learn more about how Knockout works, various debugging techniques for declarative HTML and JavaScript view models, exploring your data context and observables, the many uses of custom bindings, the power of subscriptions, custom functions and performance tuning.


What’s in the Course?

This Essential Knockout and JavaScript Tips course helps explain how to fine tune your Knockout based JavaScript apps. The course is divided into “Rounds” (a Knockout and boxing pun) with each round focusing on enhancing specific sets of Knockout and JavaScript skills.


  • What to Expect from Knockout and JavaScript Tips
  • Getting Started with the Demo Code
  • Round 1: Starting Off on the Right Foot with Observables
  • Round 2: Live Debugging
  • Round 3: Inspecting Bindings
  • Round 4: Custom Binding Handlers
  • Round 5: The Truth of Computed Observables
  • Round 6: Manual Subscriptions
  • Round 7: Event Delegation and Performance
  • Round 8: Performance

Source Code

Most of the code samples are based either on my Code Camper SPA (as seen in my SPA JumpStart course) or code samples from scratch that I run in Plunker. As the samples are used, the course describes where you can get the source for both so you can follow along. You can access the final source code for my SPA JumpStart course and other resources from this SPA resources page.

Knockout Fundamentals

If you need a refresher on any of the Knockout Fundamentals, you can watch my beginner level Knockout course on Pluralsight too.

More Knockout Resources

What’s Next?

I have a bunch of courses in mind including expanding on (in alphabetical order) Angular, Breeze, Durandal, JavaScript, and SPA Tips.

Thanks to Fotolia

If you enjoy the photos in my slides for this course, then you can thank my subscription with for those. You can get a discount on images by following this link. fotolia-52_600

tags: course debugging javascript knockout performance pluralsight
  • Matt

    Your first Knockout course on Pluralsight is great and has been immensely useful as a reference for apps making use of Knockout, even if those apps are not SPA’s. Even before I read the end of your blog post, I was wondering your thoughts on AngularJS, and sure enough it was already on your mind to make some courses on AngularJS. I am very interested in what you think about the future of the these projects and what a rational approach to development today would look like, especially for those who have already invested heavy learning time – and existing applications – with KnockoutJS. Sure, it’s probably in anyone’s best interest to learn to use as many frameworks/libraries as possible, but from a practical viewpoint that takes into account quickest development time and ease maintenance, the calculation for what to do gets more complex.

    • John


      Thanks for the great feedback. Glad the content is useful for you. Today when asked if one should build a SPA with Knockout or Angular, my answer is choose Durandal/Knockout or Angular. Durandal is comparable to Angular, while Knockout is just data binding (though binding handlers and binding providers are darn powerful, like Angular directives). If you have experience in one already, stick with it. If one appeals to you more, use it. They are both great, both can be augmented by other great libraries like Bootstrap, Breeze, Toastr, Moment, RequireJS, etc. And I believe both have a bright future.

  • Tim


    I noticed that in round 2 you mentioned the Chrome KnockoutJS plugin, are there any more features that you are interested in? Maybe I could give them a try and keep improving the plugin.
    The latest version supports tracing, something that can be very usefull for performance issues.



    • John


      It is a great plugin. It’s only downside is that it work sin Chrome only :) In a perfect world it would be cool to be able to update items and see the bindings change in the fly in the plugin. Perhaps even see the notifications when they happen, so we can see what is firing event and re-evaluations. That’s all nice … but its very useful as-is too.

  • Nat

    Hi John,

    Fantastic course! This should be your full-time job. :)

    I’m really hoping to see something dedicated to Durandal (2.0?) as well as Breeze. Unfortunately, there’s not a lot out there in the way for structured training for these two emerging technologies, yet they both seem to have the potential to change the enterprise application landscape completely.

    Take care,


    • John


      Thanks, I appreciate that and really enjoy training and sharing. There are both Breeze and Durandal courses in the works, at least I hear rumors of that :).

    • Addie

      I also strongly encourage you to consider making courses for Durandal and Breeze. I went through your SPA Jumpstart course and thought it was excellent. I am currently writing/porting a fairly advanced WPF application using SPA Jumpstart as a guide.

      I would love to see and in-depth treatment of Durandal and Breeze. I think the stack/collection of Durandal/Breeze/Knockout along with Requires/Moment/Bootstrap/Toaster is incredibly powerful. Having really good courses for Durandal and Breeze would really help launch this solution to the SPA question (IMO).

  • Imran Qureshi

    Love your videos! We’ve used them in my company to rewrite the whole architecture of our application in a few weeks; we were able to reduce our code size by half and get faster performance. Hopefully next you can create a video on how to effectively do automated testing for SPA applications. We’re using QUnit to test our javascript business layer but not found a great solution for testing the views/view models.

    • John

      Imran – Thanks for the feedback. There are a few unit testing courses out there, such as the one from Elijah Manor or the one by Joe Eames at Pluralsight. I’ll be including some testing in my upcoming course, but not thoroughly.

  • Quentin

    Hi John, been following your Jump-start course, really great stuff. I have run into a spot of trouble though. It is east to reproduce in your code.

    I am trying to run Parent/Child relationship and map it into Breeze on the client side. Something like “Order” -> “Order Details” for reporting type requirement. “Show me the list of orders and details for the last month” (Excluding the customer in the test case.)

    In the datacontext, your select statement for getting speakerpartials, if you add the “SpeakerSessions” into the select clause the entity mapper from dto to entity fails when trying to set the SpeakerSessions propertty on the entity.

    Breeze says: “Error getting data. Collection navigation properties may NOT be set.”

    Any ideas around this? From what I have seen on the breeze docs, this is not possible. You need to nvaigate bottom up, i.e. OrderDetails -> Order. but this is tricky to do when you try and group headers in HTML for a report.


  • David Spenard

    Hi John, I just finished your course ‘Building HTML5 and JavaScript Apps with MVVM and Knockout’ on Pluralsight and thoroughly enjoyed it. Your examples are very clean and simple and you did an excellent job covering everything you need to get started with Knockout. I’m using it on a new project along with Kendo UI Web for its widgets and Bootstrap for everything else needed to style and dress up the application. It’s going well and using Knockout really makes writing Javascript enjoyable, which was not possible a few years ago, in my opinion. :)

    Keep up the good work!

%d bloggers like this: