background preloader


Facebook Twitter

Knockout.js Troubleshooting Strategies. This post contains a number of tips, tricks, and strategies that I have used over the last couple of years to debug Knockout applications. Feel free to share some of your own tips in the comments or suggest other areas that you would like to see discussed. Binding issues The most common errors encountered in Knockout typically center around incorrect or invalid bindings.

Here are several different ways that you can diagnose and understand the context of your issue. The classic “pre” tag One of the main debugging tasks is to determine what data is being used to bind against a certain element. Knockout includes a helper function called ko.toJSON, which first creates a clean JavaScript object that has all observables/computeds turned into plain values and then uses JSON.stringify to turn it into a JSON string. As of KO 2.1, the second and third arguments are passed through to JSON.stringify with the third argument controlling the indentation to produce nicely formatted output.

Lazy? Hello, Knockout. This lesson is designed to be a high-level survey of Knockout.js’ main components. By implementing a concrete sample application, we’ll see how Knockout’s ViewModel, view, observables, and bindings interact to create a dynamic user interface. First, we’ll create a simple HTML page to hold all of our code, then we’ll define a ViewModel object, expose some properties, and even add an interactive binding so that we can react to user clicks. Before we start writing any code, download the latest copy of Knockout.js from the downloads page at As of this writing, the most recent version is 2.1.0. After that, we’re ready to add the library to an HTML page.

Let’s start with a standard HTML page. Sample code: item1.htm This is a basic HTML 5 webpage that includes the Knockout.js library at the bottom of <body>; although, like any external script, you can include it anywhere you want (inside <head> is the other common option). Figure 8: Basic webpage. Invexplorer - Wijmo/KnockoutJS/jQueryUI sample. A Stock Portfolio Application Using KnockoutJS. Introduction As tablets and SmartPhones become more popular, developers face increased demand to write applications that can run on those devices as well as on desktops. HTML5 and JavaScript can help developers achieve this goal with a single code base.

Until recently, writing applications using JavaScript and HTML was quite difficult, because developers had to create all the business logic, the user interface, and then connect all these elements using JavaScript code and the HTML document object model. By comparison, writing web applications in Silverlight was much easier, because the logic and the user interface could be implemented largely independently, and later connected using declarative bindings.

This situation started to change with the introduction of JavaScript libraries such as jQuery, jQuery UI, and KnockoutJS. This article describes the implementation of Invexplorer, a stock portfolio application similar to Google finance. To run the application in your browser, click here. MVVM with HTML5/KnockoutJS/SVG. Introduction This article is to demonstrate how one can write an MVVM based HTML5/SVG app with the help of KnockoutJS library. SVG which stands for Scalable Vector Graphics is a specification of an XML-based file format that makes it possible to represent 2D graphic information in a compact and portable form. The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999. SVG is supported by the latest version of all modern browsers including IE9 and beyond. The Model-View-ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the presentation model design pattern introduced by Martin Fowler It is an excellent design pattern used to facilitate a clear separation of concern between View (presentation/graphics) with the Model (data/business logic).

One can write an excellent SVG based web application with a conventional JavaScript and HTML5. Background Summary. Knockout.js Troubleshooting Strategies. All of the live samples in jsFiddle. Update 5/18/2012 - the fiddles are now up-to-date with and are using KO 2.1 Often in the Knockout.js forums, new users have a desire to play with and modify some of the live examples shown on

Often times, I help users get their sample working in jsFiddle or make a fiddle that they can fork. I thought that it might be useful to have links to fiddles for all of the currently available samples. Introductory examples Detailed examples Contacts editor – original - in jsFiddleEditable grid – original - in jsFiddleShopping cart screen – original - in jsFiddleTwitter client – original - in jsFiddle Tutorials Introduction – original - in jsFiddleWorking with Templates and Lists - original - in jsFiddleSingle Page applications – original - in jsFiddle or full page hereCreating custom bindings – original - in jsFiddleLoading and saving data – original - in jsFiddle.

Client Insight - Getting Started with Knockout. Data binding is one of the most popular features in development today, and the Knockout JavaScript library brings those features to HTML and JavaScript development. The simplicity of the declarative binding syntax and seamless integration with separation patterns such as Model-View-ViewModel (MVVM) make common push-and-pull plumbing tasks much simpler while making code easier to maintain and enhance. In this inaugural Client Insight column I’ll discuss the scenarios for which Knockout is ideal, explain how to get started with it and demonstrate how to use its fundamental features.

The code examples, which you can download from, demonstrate how to use declarative binding, create different types of binding objects and write data-centric JavaScript code that follows good separation patterns such as MVVM. Getting Started Knockout, developed by Steve Sanderson, is a small, open source JavaScript library with an MIT license. No Bindings Observables. Beginners Guide to KnockoutJS: Part 1. A Beginners Guide to KnockoutJS: Basics and Observables Almost everyone dealing with web technologies knows jQuery, or at least has heard about it. Its unmatched simplicity and conciseness makes the lives of millions of web developers all over the world much easier–and that’s fantastic. Unfortunately jQuery is not solution for every problem. As soon as you decide to create some more complex web apps you encounter a problem – there is no easy way to make your UI and data communicate each other dynamically.

With the low-level DOM manipulation and events handling provided by jQuery this is fairly hard to achieve. You need a library providing you with more sophisticated way of communication between your UI and the underlying data model. And here is where Knockout comes in. Although you will need to use Knockout with jQuery at the same time, in some cases like animated transitions, Knockout itself doesn’t depend on it. Basic Concepts A model that holds your application’s data. 1. 2. 3. Trajectory Motion Simulator with HTML5/SVG/KnockoutJS. Introduction This article shows how one can write a simple trajectory motion simulator using SVG/KnockoutJS.

A trajectory motion is a very established body of physics that we have seen many applications in the real world. Among many real-world applications, trajectory motion has become the basis for many computer games these days. The very well known game that uses the trajectory motion is the famous Angry-bird game where a player can aim the angry birds with certain angle to create a trajectory motion to hit and crush the targets (castles, items, pigs).

Background My previous article MVVM with HTML5/KnockoutJS should give you a kick start on MVVM with SVG/KnockoutJS. Thereby, I would not cover the basics of SVG/MVVM/KnockoutJS in great details in this article. I invite the reader to also check the paper on trajectory motion simulator Multilayer Perceptron as the basis for Gaming Motion Generation. The Trajectory Motion Equations x = Vx . t y = Vy . t - 0.5 . Writing the Simulation Code 1. 2. DevLink 2013 - Knockout.js Tips and Tricks. Blog Archive. Dynamic D3 with Knockout.js. A couple of things happened recently that prompted me to write this blog post. Firstly, I’ve been playing around with HTML5/javascript based user interfaces and data visualisation. Secondly, I watched a fascinating presentation from UX guru Brett Victor, making me wonder if it was possible to create an interactive, data-drawing app like the one he demonstrates, purely with Javascript.

There are 2 well established JS frameworks that we could combine to help us here: Knockout.js and D3. But can we make them work well together? The pieces – Knockout I assume you know roughly what Knockout.js and D3 are. Here’s a trivial view model that exposes an observable string: Which we can then bind to something in our view/HTML: Now whenever the view-model is updated, either in code ("blah")) or by binding it to a control that accepts input, our UI will automatically reflect the change.

D3 is a library for creating data-driven documents. Phew. Of course, that’s just scratching the surface.