Tag Archives: KnockoutJS

Useful Reference Samples for KnockoutJS

After I recently started using KnockoutJS, the awesome MV-VM Javascript library, I came across several samples which serve as a great reference for real-world scenarios to solve specific UI problems. Because it’s hard to get to when I wanted to take quick look at, thought of making a list. This is an evolving list, so will keep adding samples as I find them.

I am sure you will find them useful.

The reference samples are created by community and are mostly on the JSFiddle.net

  1. ObservableArray Manipulation, providing own mappings for ko.mapping Plugin
  2. Defining a customBinder
  3. Nested Comments Sample
  4. applyBindingsToNode, reapply bindings
  5. Data binding html element’s attributes like Title, Class etc
  6. Subscribe to property inside ObservableArray
  7. ChangedItemes and deltatracking to sent to server
  8. Undo/Redo quick initial sample
  9. Keep a track of selected items (checkbox list) on the client side

Lambda like code with Javascript in KnockoutJS

KnockoutJS has a good set of utility functions built in under ko.utils which were actually part of ko, to make ko. However you might find them very useful in writing regular javascript code as well. I came across this example by rniemeyer on ko Google group, which works like lambdas in any language ( => in C#)

ko.utils.arrayFilter allows you to do a items.Where(i => i.type == myType) like statement.

var viewModel = {
    items: [
        { type: "a", name: "one" },
        { type: "b", name: "two" },
        { type: "a", name: "three" },
        { type: "b", name: "four" },
        { type: "b", name: "five" }
        ],
    filteredItems: function(type) {
        return ko.utils.arrayFilter(this.items, function(item) {
            return item.type == type;
        });
    }
};

The JSFiddle for the working sample is at http://jsfiddle.net/rniemeyer/Kbszh/

Swimlanes for Scrum now on CodePlex

Swimlanes for Scrum is now on Codeplex for everyone to use. Like I mentioned in the last post, this project started off as a learning exercise. But I figured, there might be other Scrum teams out there who might need lean and mean web-based Scrum Swimlane taskboard for use, in daily stand-up scrum meetings.

So here it goes, modify the web.config file to suit your settings, host it on IIS, set the application pool to “Enable 32 bit applications” and off you go.

http://swimlanes.codeplex.com/

Swimlanes for Scrum
Swimlanes Taskboard for TeamProjects with TFS (currently supports SfTS V3 Template)

Features:

  1. Look at Product Backlog Items and Sprint Backlog Item statuses and get the big picture for a given sprint (Sprint numbers are configurable via the web.config)
  2. Ability to modify statuses and move from one status to another.
  3. Vertical and a horizontal view (for non-widescreen displays)

Wish list for Enhancements:

  1. View complete details (all fields) of a work item in a tooltip
  2. View Related links, for a given Product and Sprint backlog item
  3. View Impediments, Retrospectives, bugs
  4. Windows Authentication (login with domain id)
  5. Search
  6. Support for MS Agile Templates
  7. Support for other Scrum Repositories, apart from TFS

Technical Details:

Built with the following technnologies

  1. ASP.Net MVC 3 on Visual Studio 2010
  2. jQuery and jQuery Templates
  3. KnockoutJS
  4. TFS API and WIQL (Work Item Query Language)