Adam Finzel

First Open Source Project – Knockout Creator

Well it looks like this blog is all about firsts at the moment. Today I created my first open source project, Knockout Creator. This is a library that supports Knockout.Js.

What is Knockout.js?

Knockout.js can be found at http://knockoutjs.com/ . Knockout is a Javascript library that brings a MVC approach to Javascript. The idea is that you create a view model in javascript. You can then change the UI dependent on the view model. Its probably easier to understand if you look at a live demo http://knockoutjs.com/examples/twitter.html.

So whats your project do?
The problem I found with knockout is, you end up creating the view model in Javascript and then recreate the same model in c# when you want top pass the view model back to c# for saving or lookup. I hate duplicate code!! So Knockout Creator will generate the Javascript view model for you so the view model exists in just one place.

Usage

Your View Model

namespace knockoutExample
{
	public class Restaurant : Knockout.ViewModel
	{
	        public int RestaurantId { get; set; }
		public string Name { get; set; }

	}
}

Setting up your controller

public string KnockOutJs() {
	restViewModel = new Restaurant();
	koCreator = new Knockout.KoCreator()

	//Set your controller name
	koCreator.PageName = "Home";

	//Add your viewmodel Restaurant is the name of the model we want in javascript
	koCreator.AddViewModel("Restaurant", restViewModel.GetType());

	//Add a javascript function subscription.  This will call the javascript function test() everytime the name is changed
	koCreator.AddJsSubscription("Name","test");

	//This will return the javascript, we pass in the controller so that Knockout Creator can bind subscriptions
	return koCreator.GenerateJs(this);
}

Creating a method to be called using AJAX

//Add a custom attribute specifying the variable that when changed will trigger this via AJAX
[KoMethod("RestaurantId")]

//The method accepts one attribute, our viewmodel.  This will be passed back using AJAX
public JsonResult GetRestaurantById(knockoutExample.Restaurant viewModel) {

	//get the restaurantId that has been posted
	int restaurantId = viewModel.RestaurantId;

	//Load the record from the db
	Restaurant restaurant = _restaurantRepository.Load(restaurantId);

	// set the viewmodel name
        viewModel.Name = restaurant.Name
	
	//return the viewmodel back to the browser
	return Json(viewModel);
}

Setting up your view

What gets put in your browser?

So what now?

Every time the RestaurantId is updated a call will be made to the server and will run GetRestaurantById. GetRestaurantId will load the Restaurant from the database and will return the view model back.

How can I get the source?
Get over to github https://github.com/afinzel/KnockoutCreator