I’m eager to get deeper into Knockout so I’m continuing the tutorials at http://learn.knockoutjs.com. The next one is about creating custom bindings.
In Knockout the bindings join the view and viewmodel and perform updates in both directions. There are a lot of built-in bindings but we can create our own custom bindings as well.
This tutorial show us how to use custom bindings to do an animated transition, integrate with third-party components and implement custom widgets.
For each bindings we write functionality for init and update. Init is what happens when the binding first happens and update is called whenever the associated data updates.
The bindings can be put in separate files to be used anywhere in the application. So with just a few lines of code we have very usable and reusable bindings for our application.
I just keep getting impressed with Knockout.
The next, and last, tutorial is about loading and saving data. Finally we get to see how to integrate our client-side code with the server-side code and do some “real” stuff. We have all we need on the client-side on how to display our data and get a responsive dynamic user interface. The last piece of the puzzle is how to get the data to and from our data storage.
Knockout is purely client-side and works with any server-side technology. For me personally that would be ASP.NET but it could be Rails, PHP, etc. as long as it can send JSON data.
The scenario for the tutorial is building a task list. To get data from the server we use jQuery’s $.getJSON and $.ajax functions that will call server code on URL /tasks that responds with JSON. One important thing is that we don’t re-bind the UI every time we load data, updating the viewmodel is enough to update the whole UI.
jQuery’s $.map constructs the client-side Task item, the server-side Task item’s properties have been mapped to the client-side in our viewmodel. I recognize this from AutoMapper when I had server-side viewmodels instead.
This is manual but there is also an automatic way to fetch and map, the knockout mapping plugin.
There are two ways of sending data back to server
1: If you have a representation of your model data inside a regular HTML form you can post it back to the server. Adding a hidden input field and data-binding it to ko.toJSON(tasks) takes care of that. Post it to an URL with server code that takes care of the JSON and it’s done.
2: Send using ajax request. Add a save function to the viewmodel and in that you use $.ajax to send it to your server url.
When it comes to deletions the server would have to compare the incoming data to the database to know if something was removed. Instead Knockout give us a destroy function on an observable array. Instead of remove we use destroy. The item will be kept in the array when sent to the server but the server can check for the _destroy property and delete if it’s set to true.
This is so awesome, I’m falling in love with Knockout and will try to put together a simple application of my own very soon.
The first week (7 hours) done! It’s amazing how much you can learn in just an hour a day. I think I’ve probably learned more new things this week than in the past six months.
I’m starting to get a hang on Knockout and Git, I have got an introduction to node.js, NancyFX and Personal Kanban. In the same time I have worked full time, spent time with my fiancée and since we’re renovating our house I have puttied and sanded the walls in two rooms and done some painting and I have also written these blog posts. So don’t tell me you don’t have time even to listen to a podcast. 😉
I’ve listened while renovating, walking to and from work and did some coding when I had some spare time. I will get some more time for coding the upcoming weeks but for now listening to podcasts is enough.
Podcasts are awesome. There are so many new things popping up every week and it’s a great way to find out what’s going on, and you’ll learn stuff while doing daily routines and such.
I’m very excited for what the next 7 hours will give me.