Skip to main content

Knockoutjs MVVM using Java Script


During the past working days I have been a little confused about some concepts in the KnockoutJS and how stuff works in the hierarchy we are using, how should we bind stuff.

  • First of all to get a brief introduction on KnockoutJS, it is a java script library written to apply MVVM pattern on html or ASP MVC ”if you do .NET ” and by MVVM we can only say the word that we used very often while doing Silverlight or WPF, the word is BINDING the magical word that simply makes the speed and interactivity between your model and view irresistible, do we use binding yes !!! and boy this is one sexy word that I would love to use, binding was one of the strongest points that Silverlight had, thanks to knock out we can do it here


  • I am not going to dig deep into this as I am still new at it beside I don’t wanna do code, just concepts and clarifications to make life easy for those who want to use KnockoutJS.

  •  Why use it where should the model be how to bind all these questions I will answer with code sample to clarify if you have not seen Steve Sanderson video its ok, but I highly recommend, no body explains it better.

  • First the create in the JS File to be the ViewModel : they act as in MVVM view Model how? Simply by including the binding data in Javascript objects or functions, in other words it is our DataContext which we should bind our views to and could contain eather java script dom objects or functions to be used.Here is an example of a model that use in a project of mine 
  •  Note the ko.observable is a defined type in the knockout which has a built in notifier and thus notifies the view when it changes so it can be updated via binding 

  • Second how should we use the ViewMoel we created using JS: On the server side we pass our dynamic objects to the ViewBag “that’s it for you server-side nothing more”, next using javascript we fill our previously created objects in the ViewModel “which should be referenced and thus seen in the view” with the data from the ViewBag we can then add java script to perform a certain functionality of what so ever.

  • this the part where the page loads and the data is filled from the server to the java script object created above, weather you are using MVC or ruby on rails or whatever you should be able to figure this step on your own
  • Last we set the binding by using the code below ko.applybinding(my.product); and thats it
Labels:

Comments

Post a Comment

Popular posts from this blog

Windows Phone 8 - Application bar command binding MVVM

This is a short post in which i will explain how on Windows phone 8 to bind the application bar button or menu item, first this is only a fix for the  BindableApplicationbar  which supports windows phone 7 only, i just made it support windows 8 no features added or anything. i have uploaded the dll file here so it can be accessible easily here is the link to download http://sdrv.ms/RApUal now that you got the link lets check how we gonna use it you can refer to BinableApplicationbar  or check out the code here that i actually used in my app and i already read it there !  Add a reference to the BindableApplicationBar library here is the link again  http://sdrv.ms/RApUal Add XML namespace declaration in your page's XAML: xmlns : bar ="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar" Set Bindable.ApplicationBar property on your page code as in the snippet below: < phone : PhoneApplicationPage >  ...
6 comments
Read more

Windows 8 – XAML/C# how to Add multi push pins to map control Bing maps

Greetings readers I promised you in my previous post that I am gonna go a little bit deeper in the Bing map control and I will should more advanced scenarios and one is push pins, Basically I am going to tell you how you can add push pin to your map and also how to dynamically populate those push pins using binding Refer to my previous article Using bing maps part one  for more details cause I am going build on it so if you ever feel that you don’t understand something just click the link and spend a few minutes reading it, I promise you it will prove worthy. First lets add a normal push pin to our map  < Grid Background = " {StaticResource ApplicationPageBackgroundThemeBrush} " > < bm : Map x:Name = " MyMap " Width = " 640 " Height = " 480 " Credentials = " {StaticResource BingMapsApiKey} " > < bm : Map.Children > < bm : Pushpin x:Name = ...
6 comments
Read more

Xamarin Forms: XAML Creating Custom Controls The MVVM Way

Intro For a growing UI page there always comes a need to create sub views that can be used inside a bigger view, and for that we need custom controls, which are controls that are derived either from a layout or a simple view which is the basic control for almost any UI component in Xamarin forms, and therefore for a start i will use that as an example. And in such example we will create a custom control with a set of bindable properties and explain how they work, also how to add an event that can also be bound to Commands Lets Create the control  I have just went ahead and created a custom control that inherits from Xamarin.Forms.View and have some properties such color and checked all properties to be bound to by the ViewModel serving as the datacontext of the this control. here is the code below using System; using Xamarin.Forms; namespace UserControls { public class CustomView : View { public Color Color { get ; s...
Post a Comment
Read more