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 . 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

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.


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

	//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

//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

Sunday, August 21st, 2011 c#

Leave a Reply

December 2023
« Jan