Category: KnockoutJS

MSWebDay – What I took away from it

Today, Feb 16th, I attended MSWebdevday ran by Microsoft in Glasgow which was an event covering all things web related from Microsoft, the speakers were @christosmatskas, @thebeebs and @martinkearn and was an all day event.

The Schedule for the day covered various topics and it was great to learn so many new things and get my first glimpse at some new technologies, I always love learning something new, and I even sat next to the illustrious Gary Ewan Park, someone who I have chatted to a few times on twitter but not every managed to meet.

Ok so lets cover the actual event:-

The first talk was by on What’s New in ASP.Net Core 1.0 and was a tour of the new features, how to get it, how to use it, whats new, whats no longer there and he also talked about how you can just take the files and drop them into a folder when deploying, there’s no gac, you can just deploy the Core files in a folder alongside your code, this is very neat, its cross-platform, and it means you could have the same site running under different version of Core going forward should you choose to or need to have this.

The second Talk was Building with JavaScript Task Runners, this was mainly about how to get gulp, how to set it up and how to run some tasks to minify your css, javascript files and all that good stuff, how to add it into Visual Studio as a build step after you compile your code, showed an example gulp file and lots more.

The third talk was Entity Framework Core 1.0, and covered EF and how to use it, how to use code first and also mentioned EF6 how its improved greatly from previous versions and why you should choose this version at the moment whilst EF Core 1.0 is still being worked on and has the tooling added to it for the Core 1.0 release.

The fourth talk was APIs: the cogs behind the machine and this talk was about api’s and mainly web api and how in Core 1.0 there is no MVC and WebAPI its just one thing now and your controller is an API controller, so no need for MVC and WebAPI there is just the controllers now which kind of merge both together.

The fifth talk was Dev Ops in Azure and this covered deploying your website to Azure, making changes, showing the changes, getting the publisher file for using in side Visual Studio and publishing your changes from Visual Studio using Git int his example to deploy your changes from within VS up to the new Azure portal.

The sixth talk was Hitchhikers Guide to JavaScript, this talk focused on ECMAScript and the future of JavaScript and basically how a lot more code that we write will be JavaScript and we saw examples of the features coming in the next few years etc.

The seventh talk was Web Performance and how to check your websites performance using tools like YSlow and Google Page Speed etc and then how to go about making it make far less requests, cache JavaScript, enable IIS features and how to optimise images etc to make your website perform much faster that it currently does.

The eight talk was Single Page Applications and was about KnockoutJS and Angular, talking about Angular 2 and how it makes use of TypeScript and showed code covering KnockoutJS and AngularJS.

The ninth talk was about Hybrid Web Apps and how you can create application that can appear as Windows 8/10 tiles, make use of Microsoft Office and showed some very neat stuff using ManifoldJS which is itself very cool stuff.

Other stuff mentioned
I wrote some notes during the talks (should have taken a lot more) but a couple of things I need to look at are listed below:-

The event was great, full days learning, a lot of content covered, great speakers and good turn out. Spoke to some guys I chat to on twitter and all in all an awesome day spent learning some new stuff. There was a lot of content, I’ve missed half of it I’m sure so take a look at the slides on the site at MSWebdevday.

Dear Microsoft can we have some more of these days please? – especially Azure and Core related content.

KoLite – dirty flag and more

KoLite its written by John Papa and Hans Fjällemark and has helpers which add some extra very nice functionality to KnockoutJS.

I was working on a project which uses KnockoutJS and had the need to implement the idea of setting a dirty flag if a user made a change to a form, this would in turn enable a save button and allow the changes to be saved.

KoLite makes this very easy indeed, I decided to put together some quick code demonstrating the features I mention – at work doesn’t work too well so I have added the code to a sample app and uploaded it to GitHub.

The original samples and more information can be found here, I thought they could do with being expanded upon a little.

The ViewModel I used for the demo code is as follows:-


Dirty Flag and how to use it

  • The code on line 10 is creating the dirtyflag by using KoLite’s DirtyFlag – I pass in which observable’s I want to monitor to see if they become dirty when they’re value changes.
  • The code on line 27 is setting up a computed observable which will return true if the observables have theyre values changed, otherwise it will return false.

So by having some observables updated we can track for dirty changes and then decide what we want to do on our form, an example would be to enable the clear form button as well as enable the save button on when we have the dirty flag set to true.

Grey out button when Ajax request is in progress

  • The code on lines 29-33 is making use of the KoLite asyncCommand
  • If you then add the code below, to the html then we have the functionality were after.
[sourcecode language=”csharp”] <button data-bind="command: saveCommand">Save</button>

Grey out button when Ajax request is in progress and show activity icon

  • If you add in the extra binding like so:-
  • [sourcecode language=”csharp”] <button data-bind="command: saveCommand, activity: saveCommand.isExecuting">Save</button>

KoLite will now add in an activity icon within the button, and that’s it – in the example code I am using an Ajax post to call the MVC Controller and whilst this is off doing work the activity icon spins.


  • My demo code can be found here
  • You can download the code for KoLite here

Leave a comment after the beep.

My DotNetCurry Magazine Articles

Over the last couple of months I have been privileged to write a couple of articles for the free .Net Developer Magazine brought to you by

Its been my first attempt at writing for a magazine and has been a lot of fun, maybe in the future I can write more articles.

Please enjoy and give them a read – and sign up for the magazine – its FREE!

Create a Snappy UI with KnockoutJS -> Issue 3
This article explores KnockoutJS and what KnockoutJS gives you as a developer.

Web Essentials for Visual Studio 2012 -> Issue 4
This article explores the Visual Studio 2012 Web Essential add-on.


What’s New in RavenDB 2.0 -> Issue 5
This article explores RavenDB 2.0

Take a look at these articles and hopefully you will learn something new – Gregor.

KnockoutJS – what I’ve learned so far

I have been using KnockoutJS at work for the last few weeks and thought it might be an idea to blog about my findings whilst using KnockoutJS within an MVC 4 project, so here goes: –

  • With KnockoutJS you can get a really slick user experience if you show discipline in structuring your code, you can separate out your concerns using unobtrusive JavaScript – i.e. don’t put your JavaScript in the HTML, yes add data-bind attributes but that should be all you need, your JavaScript can be referenced from a file within a JS folder or similar keeping your HTML clean and free from being polluted by lots of inline JavaScript.

  • If you’re wondering how you go about going from your MVC model and working with this in KnockoutJS then look no further than KnockoutJS mapping. This plugin will take your existing Model from c# and convert it into what you will use within KnockoutJS, for example if in your model you have a string[] defined like so:-
    [sourcecode language=”csharp”] public string[] EmailAddresses { get; set; }
    [/sourcecode] then the mapping plugin converts this to an observableArray, and if you have a simple string property such as: –
    [sourcecode language=”csharp”] public string Email { get; set; }
    [/sourcecode] then the plugin will map this to a knockout observable for you.

  • When using ObservableArrays note that the number of items in the array is tracked – not the actual values within the array – this is important if, if the front end requires updated to the values within the array then you need to make the items within the ObservableArray observable also.

  • Take a look at the ko.utils code mentioned here for some hidden gems when working with KnockoutJS.

  • Dont store a lot of information in observables if you don’t have to, it’s not a good idea to store 10,000 records in an observable array and then bind that to a grid (Only store what you need in observables)

  • It can be a good idea to display on your page the contents of your viewmodel whilst you’re debugging so you can see what the observable and observable arrays you’re using contain

    [sourcecode language=”csharp”] <div id="debug" style="clear: both">
    <hr />
    <div data-bind="text: ko.toJSON($data)" />
  • More soon as I use it more and more, hope that helps.

Create CoffeeScript using Visual Studio and the Web Essentials Add-On

“CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way”

If your writing JavaScript in your web application, and the chances are these days you will be, then CoffeeScript is well worth a look – if your like me and you don’t particularly like writing JavaScript then bare with me you might learn some new tricks – CoffeeScript attempts to make your life easier when writing JavaScript and for the most part does a good job, it’s not all plain sailing as you might expect if you have worked with JavaScript much in the past.

Ok lets crack on, if you have Visual Studio handy make sure you have installed the Web Essentials Extension. This is a beauty of an add-on and has a nice little add-on for CoffeeScript included.

  1. Open up a new web solution either MVC app or a Web app
  2. Right click on your solution and then click Add in the next menu look for CoffeeScript, click this and we have a new CoffeeScript file added to your solution.
  3. On the left hand pane of the split is where you type your CoffeeScript and this is converted into JavaScript on the right hand side.
  4. Each time you save your changes the JavaScript file is updated for you – if you make any syntactical changes incorrectly then the preview tab on the right hand side will show you which line the error is on.

Some CoffeeScript basics are as follows:-

  • Semicolons are not required -> ;
  • Parenthesis are usually not required -> ()
  • Curly braces are usually not required -> {}
  • Commas are sometimes not required -> ,
  • Indent your code by tabbing for the start of a code block
  • Decrease indentation – end of a code block
  • The following screen shot shows you Visual Studio 2012 using the Web Essentials extension and I have added some CoffeeScript on the left and Web Essentials does the rest for me turning this into JavaScript.

  • To learn more about CoffeeScript check out the official website here.

CoffeeScript can be useful when your using something like KnockoutJS and you want to structure your code nicely using JavaScript classes and namespaces – I have been suing it recently and it has good points and bad points.

The good: – It allows you to structure your JavaScript easily and you can use namespaces as you would within C# classes. Less code is always good in my opinion and with CoffeeScript its easier to write less code to create your JavaScript files.

The bad: – Tabbing indents your code and this is how you create functions and loops and so on, miss one tab out and you can be left scratching your head but with some care this should be easily fixed.

Learn anything useful? – please let me know by leaving a comment after the beep.

What I learned last week – 3rd September – 7th September

This past week I have been mainly working with KnockOutJS, if you looking for a way to create a rich UI that users will love and your building a website then I highly recommend you take a look at KnockoutJS

What I learned this past week

  • Web Essentials 1.1 for VS 2012 by Mads Kristensen has been updated, you can read more here – go check it out.
  • RavenDB Backups – I decided to instead of using the RavenDB Backup.exe – I am going to stick with just exporting the tenant database and saving this off to a network share.
  • At work we are looking at introducing CoffeeScript – CoffeeScript is a language that sits on top of JavaScript and compiles down to JavaScript but has added benefits including making your code cleaner and has much more signal to noise ratio – more on CoffeeScript soon , I’m off to learn more on it via PluralSight.
  • Redgate have taken on the 2 developers who write Glimpse and will be adding to the project – you can read more here.

What did you find useful this week? – please let me know by leaving a comment after the beep. – what is it and why is it so useful?

If your writing a web application and using any kind of JavaScript library then jsfiddle is something worth taking 5-10 minutes to look at in my opinion.

You can try out your JavaScript (any library you can think of) add some HTML and sprinkle with CSS and quickly see the results, its a no brainer.

At work we are starting out on a web application which we will be using KnockoutJs on and jsfiddle will be invaluable, I have been watching the Pluralsight and Tekpub videos on KnockoutJs and wanted to blog about jsfiddle after watching John Papa talk about it in one of his KnockoutJS modules.

John’s courses on Pluralsight are awesome and I highly recommend them, the one I refer to was his course on Buiding HTML 5 apps (middle one below):- is a website where you can test out some JavaScript code snippets you have, before you add them to your project, it’s an excellent little test harness for ideas and trying things out.

You can save the fiddles you create and share fiddles with others if you can’t get something working and could use some help with some tricky JavaScript.

Ok less talk more action:-

  • Browse to and then sign up for an account, the reason you want an account is so you can save fiddles for later and come back to them in the future.
  • You can add in pretty much any JavaScript library as a a managed resource so that you test all kinds of stuff, jquery, jquery ui, knockoutj, kendoui and more.
  • If you see a blog post that mentions a js fiddle and you want to it then I will show you how to use it below:-

How to create your first fiddle using jsfiddle

  1. Since this demo is going to use KnockoutJS we will add a reference to KnockoutJS
  2. Browse to and then copy the location to the latest version of the knockoutJS library, at this moment in time this link to the file we need is :-
  3. To add this to our jsfiddle look at the left hand side looking for ‘Add Resources’ and then paste in the link to the js file and then click the plus icon.

  4. The screen is split into 4 sections:-

    • Top Left is for HTML
    • Top Right is for any css styling you wish to add/try out
    • Bottom Left is where you add your JavaScript code.
    • Bottom right shows the output you would see in the browser
  5. Add the following into the top left hand window pane (Html):- [sourcecode language=”csharp”] <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
  6. Now add the following into the bottom left window pane (JavaScript):-
    [sourcecode language=”csharp”] // This is a simple *viewmodel* – JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());

  7. And thats it we are ready to save the fiddle and test it out.
  8. To test out our code click Run up at the top and you can use your favourite browser to check for any errors that may arise as you play around with the code.
  9. A very simple demo but you get the idea on whats possible, and if like me your trying to learn KnockoutJS its an invaluable tool.

Ok now that you get the idea, go create some fiddles and test our your ideas using any JavaScript library you can think of – enjoy!

Starting out learning KnockoutJS

So I want to learn KnockoutJS as we are going to be using it on a project at work very soon, I have had a look at it briefly but not really used it in anger as they say. I will be using this for the next few weeks at the very least so lets get started learning it.

In order to learn knockoutJS I will be using the following resources (click the images):-

  • Official KnockoutJS site
  • Tekpub Course
  • Pluralsight Courses
  • KnockmetOut.Net

Ok so thats enough to get me started with, I’ll blog more each week maybe even each day as I come across useful tidbits of learning KnockoutJS.

If anyonelse has useful KnockoutJS let me know and I’ll add them as I go.