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

<pre class="Plum_Code_Box"><code class="">void convertIntToBinary(int number) {
int divisible;
divisible = 8;&lt;/code&gt;

if (number / 8) {
number = number - 8;
digitalWrite(LEDVAL8, HIGH);
} else {
digitalWrite(LEDVAL8, LOW);
}

if (number / 4) {
number = number - 4 ;
digitalWrite(LEDVAL4, HIGH);
} else {
digitalWrite(LEDVAL4, LOW);
}

if (number / 2) {
number = number - 2 ;
digitalWrite(LEDVAL2, HIGH);
} else {
digitalWrite(LEDVAL2, LOW);
}

if (number / 1) {
number = number - 1 ;
digitalWrite(LEDVAL1, HIGH);
} else {
digitalWrite(LEDVAL1, LOW);
}

//digitalWrite(number, HIGH);
}</code>
</pre>

<pre class="Plum_Code_Box"><code class="">#define LEDVAL1 4
#define LEDVAL2 5
#define LEDVAL4 6
#define LEDVAL8 7&lt;/code&gt;

int counter;

void setup() {
pinMode(LEDVAL1, OUTPUT);
pinMode(LEDVAL2, OUTPUT);
pinMode(LEDVAL4, OUTPUT);
pinMode(LEDVAL8, OUTPUT);
}

void loop() {
counter = counter + 1;
convertIntToBinary(counter);

if (counter == 16) {
counter = -1;
}

delay(1000);
}</code></pre>

<pre class="Plum_Code_Box"><code class="">#define LEDVAL1 4
#define LEDVAL2 5
#define LEDVAL4 6
#define LEDVAL8 7&lt;/code&gt;

int counter;

void setup() {
pinMode(LEDVAL1, OUTPUT);
pinMode(LEDVAL2, OUTPUT);
pinMode(LEDVAL4, OUTPUT);
pinMode(LEDVAL8, OUTPUT);
}

void loop() {
counter = counter + 1;
convertIntToBinary(counter);

if (counter == 16) {
counter = -1;
}

delay(1000);
}

void convertIntToBinary(int number) {
int divisible;
divisible = 8;

if (number / 8) {
number = number - 8;
digitalWrite(LEDVAL8, HIGH);
} else {
digitalWrite(LEDVAL8, LOW);
}

if (number / 4) {
number = number - 4 ;
digitalWrite(LEDVAL4, HIGH);
} else {
digitalWrite(LEDVAL4, LOW);
}

if (number / 2) {
number = number - 2 ;
digitalWrite(LEDVAL2, HIGH);
} else {
digitalWrite(LEDVAL2, LOW);
}

if (number / 1) {
number = number - 1 ;
digitalWrite(LEDVAL1, HIGH);
} else {
digitalWrite(LEDVAL1, LOW);
}

//digitalWrite(number, HIGH);
}</code>