Using the jQuery UI AutoComplete widget with Knockout

The jQuery UI AutoComplete widget is a nice one to use when the a set of know values is frequently used, like a list of city names, but you still want to leave the end user the capability to enter completely new values. And as can be seen from the examples it’s basic usage is really simple and straightforward, something like: 1: var firstNames = ['Joe', 'Maurice', 'Jake']; 2: $(‘#firstName’).autocomplete({ source: firstNames });   Adding Knockout to the mix Knockout is also a nice data-binding library that is really easy to use. A simple page that lets a user enter … Continue reading Using the jQuery UI AutoComplete widget with Knockout

To SPA or not to SPA

Index: Getting started with AngularJS Creating an AngularJS Controller The AngularJS $scope is not the MVC Model Using repeating elements in AngularJS Filtering the data in an AngularJS ngRepeat element Using the AngularJS FormController to control form submission Creating an AngularJS Directive Using the DOM in an AngularJS application To SPA or not to SPA   Creating Single Page Applications, usually abbreviated to SPA, is getting more and more popular these days. There are some popular applications like GMail or Outlook.com done this way and using frameworks like AngularJS or routing libraries like Director and Sammy it appears quite easy … Continue reading To SPA or not to SPA

How to data bind to collections using Knockout.js

In the previous two blog posts about getting started with Knockout.js and controlling updates using Knockout.js I showed to to get started with the awesome Knockout.js library. In this post I am going to show how easy it is to load a collection of items from a REST service and data bind to the complete collection. To data bind to collections of data Knockout supports the foreach data binding. This lets us point at a collection of data and create a new item for each object in the collection. In the example below I am using an html <table> to … Continue reading How to data bind to collections using Knockout.js

DotNed Podcast: Roland Guijt over moderne web ontwikkeling met Knockout.js

In deze podcast spreekt Maurice de Beijer met Roland Guijt over de moderne manier van het ontwikkelen van web applicaties. Roland verteld over het gebruik van Knockout.js voor de data binding van data aan de HTML elementen on de browser. Verder verteld hij waar hij jQuery allemaal gebruikt en geeft hij diverse tips over het ontwikkelen van single page web applicaties.   De podcast is hier te downloaden.     Voor het gemak kan je natuurlijk ook een RSS feed, iTunes of Zune link gebruiken.   Enjoy!   [f1] [f2]

Controlling when the value is updated with Knockout.js

In the previous blog post about Knockout.js I showed why and how to get started with Knockout.js. And I explained that the reason I really like Knockout.js is that it is a very familiar way of working with its MVVM style. I created a small demo where we could update the first and last name of a person and the ViewModel would combine the two and display the concatenated parts as the complete name. This worked just fine as soon as I started using observables except for one thing. Whenever I start typing the full name isn’t updated until the … Continue reading Controlling when the value is updated with Knockout.js

How to get started with Knockout.js

Once you get into doing more client side JavaScript code with business applications and REST services you are going to run into the question of how to construct the client side HTML required to show the data to the users.   Using jQuery Assuming most people are going to be using jQuery on the client you might start with some jQuery code to generate HTML. Your code might look something like this $(function () { $("#btn").click(function () { $.getJSON("/services/books").then(function (books) { $.each(books, function () { $("<li>").text(this.Title + " by " + this.Author).appendTo("#books"); }); }); }); }); The code isn’t very … Continue reading How to get started with Knockout.js