KnockoutJS Archives - Azure Greg

Feb0520135 February 20135 February 20131 Commentby Gregor Suttie

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 jsfiddle.net 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:-

code2

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>
[/sourcecode]

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

If you add in the extra binding like so:-

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

KnockoutJS – what I’ve learned so far

Posted in KnockoutJS, MVC

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 />
<h2>Debug</h2>
<div data-bind="text: ko.toJSON($data)" />
</div>
[/sourcecode]

More soon as I use it more and more, hope that helps.

Tags:KnockoutJS MVC

Aug27201227 August 201223 January 20131 Commentby Gregor Suttie

Starting out learning KnockoutJS

Posted in 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):-