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.<\/p>\n
What is Knockout.js?<\/strong><\/p>\n Knockout.js can be found at http:\/\/knockoutjs.com\/<\/a> . 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<\/a>.<\/p>\n So whats your project do?<\/strong> Usage<\/strong><\/p>\n Your View Model<\/strong><\/p>\n Setting up your controller<\/strong><\/p>\n Creating a method to be called using AJAX<\/strong><\/p>\n Setting up your view<\/strong><\/p>\n
\nThe 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.<\/p>\n\r\nnamespace knockoutExample\r\n{\r\n\tpublic class Restaurant : Knockout.ViewModel\r\n\t{\r\n\t public int RestaurantId { get; set; }\r\n\t\tpublic string Name { get; set; }\r\n\r\n\t}\r\n}\r\n<\/pre>\n\r\npublic string KnockOutJs() {\r\n\trestViewModel = new Restaurant();\r\n\tkoCreator = new Knockout.KoCreator()\r\n\r\n\t\/\/Set your controller name\r\n\tkoCreator.PageName = \"Home\";\r\n\r\n\t\/\/Add your viewmodel Restaurant is the name of the model we want in javascript\r\n\tkoCreator.AddViewModel(\"Restaurant\", restViewModel.GetType());\r\n\r\n\t\/\/Add a javascript function subscription. This will call the javascript function test() everytime the name is changed\r\n\tkoCreator.AddJsSubscription(\"Name\",\"test\");\r\n\r\n\t\/\/This will return the javascript, we pass in the controller so that Knockout Creator can bind subscriptions\r\n\treturn koCreator.GenerateJs(this);\r\n}\r\n\r\n<\/pre>\n\r\n\/\/Add a custom attribute specifying the variable that when changed will trigger this via AJAX\r\n[KoMethod(\"RestaurantId\")]\r\n\r\n\/\/The method accepts one attribute, our viewmodel. This will be passed back using AJAX\r\npublic JsonResult GetRestaurantById(knockoutExample.Restaurant viewModel) {\r\n\r\n\t\/\/get the restaurantId that has been posted\r\n\tint restaurantId = viewModel.RestaurantId;\r\n\r\n\t\/\/Load the record from the db\r\n\tRestaurant restaurant = _restaurantRepository.Load(restaurantId);\r\n\r\n\t\/\/ set the viewmodel name\r\n viewModel.Name = restaurant.Name\r\n\t\r\n\t\/\/return the viewmodel back to the browser\r\n\treturn Json(viewModel);\r\n}\r\n<\/pre>\n\r\n