Category Archives: knockout.js

April, 2013

Collaborative route planner with SignalR, Knockout.js and Google Maps

Today I have published a new article over at my friends from Tech.pro. This time, we continue on the topic of SignalR & Knockout.js, and look at implementing a real-time collaborative route planner with the use of Google Maps API. Hopefully you’ll enjoy the article as much as I enjoyed writing it.

These libraries, really make a lot the development tasks feel like true magic!

As you usually, the source code is on GitHub.

Head over to tech.pro to read the tutorial!

March, 2013

August, 2012

Knockout.js pro tips – working with templates

Because templating in KO can be very flexible

Just like last time, when we discussed observable arrays, I wanted to share a few (hopefully) useful tips about working with templates in Knockout. This is not going to be a comprehensive look into templating with knockout – there are plenty of resources that cover that – but rather a collection of smaller pieces of advice that could make you life easier.

Again, familiarity with Knockout is assumed.

Continue reading

July, 2012

Knockout.js pro tips – working with observable arrays

Because array manipulation doesn't have to be a bottleneck

Recently, I have been blogging mainly about Web API, but many people have been asking me about Knockout.js. And rightfully so, because it is one of the most robust Javascript client side technology right now.

I blogged about KO a couple of times here before, but I thought it might be a nice change to do it in a new format. Instead of a one big, end-to-end solution, let’s do a set of “pro tips”, small pieces of real-life advices for your Knockout solutions.

This article assumes a working knowledge of Knockout.

Continue reading

May, 2012

Native HTML5 push notifications with ASP.NET Web API and Knockout.js

Because you don't need websockets for push notifications

The ASP.NET Web API project progresses at a rapid pace, and has already come a long way since the beta release. And as it is OSS now, it’s really great that we all can see the progress being made (thanks, MS!). So today we are going to build a native HTML5 push notifications mechanism over HTTP protocol, utilizing the latest exciting features of Web API (PushStreamContent), modern browsers’ Server-sent Events EventSource API and, of course, Knockout.js.

Few weeks ago Henrik Nielsen on his blog was kind enough to share some updates about the latest feauters available in the ASP.NET Web API. We are going to be using his sample code as the starting point to develop an application utilizing a real HTTP push messaging infrastructure. We’ll use that to build a browser-based multi-person chat, but the principles showed here could be used for pretty much anything that requires pushing content to the client.

Continue reading

April, 2012

Your own sports news site with ESPN API and Knockout.js

Because single page applications with knockout.js are a piece of cake

I was really excited when I heard the announcement of the ESPN API. Being a sports freak like me, that opens a tremendous amount of possibilities for application development. Today, let’s build our own sports news single-page application, fueled entirely by Knockout.js.

You will be able to browse the latest news from ESPN from all sports categories, as well as filter them by tags. The UI will be powered by KnockoutJS and Twitter bootstrap, and yes, will be a single page. We have already done two projects together using knockout.js – last.fm API infinite scroll and ASP.NET WebAPI file upload. Hopefully we will continue our knockout.js adventures in an exciting, and interesting for you, way.

More after the jump.

Continue reading

HTML5 drag and drop asynchronous multi file upload with ASP.NET WebAPI

Because HTML5 with ASP.NET Web API is a lot of fun

Today we are going to build a neat HTML5 file uploader using ASP.NET Web API and jQuery. We are also going to include knockout.js to keep the list of uploaded files updating smoothly in real time.

In addition to all that, we will leverage on HTML5 drag and drop events , as well as HTML5 File API, to provide the file input to the application. Finally, we will use FormData JS interface to build up the request, and we will use ApiController of our ASP.NET MVC 4 application to pick up the files and save them on the server using an instance of MultipartFormDataStreamProvider.

More after the jump.

Continue reading

March, 2012

Build Facebook style infinite scroll with knockout.js and Last.fm API

Because with knockout.js, you shall fear UI no more

I’m convinced that most of us web developers often have to struggle with some sophisticated Javascript driven UI that tend to get out hand with their complexity, dependencies and relationships.

With that in mind, I wanted to show you an example of a knockout.js code in action.

Since knockout.js is one of the most amazing and innovative pieces of front-end code I have seen in recent years, I hope this is going to help you a bit in your everday battles. In conjuction with Last.FM API, we are going to create an infinitely scrollable history of your music records – just like the infinite scroll used on Facebook or on Twitter.

More after the jump.

Continue reading