Join Michael Sullivan for an in-depth discussion in this video Model binding with Knockout, part of ASP.NET MVC 5 Essential Training.
Model-view and view model and this is going to be a short explanation, because the model is the same model that we’ve been talking about with MVC architecture, a class that deals with persisted data for our application. The view is the same view that we’ve been talking about all along. The view model, on the other hand, is a representation of data that we’re going to work with on the client side for a given UI, and optionally some operations that we might define for that data in UI.
In Knockout many of the view model elements are going to be represented by what are known as observables. These are objects that have the ability to notify other objects when they undergo changes, so that the other objects can make any necessary updates to their own state. Another way of putting that is that these objects can be observed by other objects that are dependent on them. As a simple example imagine a text area for a Twitter message or a Tweet which has a limit of 140 characters. It’s common to have a message that’s dynamically updated to show the number of available characters remaining as the user types the Tweet in real time all on the client side.
This is easy to do in Knockout, and I’ll show you a similar simple example using our contact form before moving onto a more substantial one that builds out some additional functionality for our ATM in the next video. The first thing we need to do is grab the core Knockout script with NuGet. Right click references, manage NuGet packages, and then search for Knockout JS and install.
Let’s drag this into our script section, and then we’ll create another script element below where we’ll be defining our view model. Our view model is going to be defined as a function, and I’m going to call it contact view model. A good habit to get into is instead of worrying about scope in the value of this, just declare a variable like self, and assign this to it. The first property I’m going to define is the message, and in a moment I’m going to bind this to the text area message.
This is going to be created with ko.observable, and if I wanted to initialize it with some value I could pass it in here instead of the empty string that I’m going to pass. The next thing I’m going to set up is the message that tells the user how many characters are remaining. Let’s say in my text area I’m going to have an attribute for max length which is 150. Again, it’ll be nice to communicate that to the user, and it’s even better if you can tell them exactly how many characters they have left as they’re typing.
Now we’ll define another view model property called characters remaining. This is going to be an instance of what’s known as a computed observable, because we’re going to be constructing this dynamically based on the current length of the message. Here’s what this looks like, ko.computed and then we’ll be passing a function to build it, and that function’s just going to return 150 minus self.message.length. Notice that to get or set the value of message I need to call message like a function similar to the way we use VAL in J query, and here’s a place where using self pays off, because inside this function this would have the wrong context.
Although we could pass this in as a second parameter after the anonymous function to make it work. Okay so just a few more pieces to set up. First, we have to bind the message observable to the text area’s value and we do that with the data bind attribute, data dash bind, and we just have to give it value colon message. Next we need an element to bind the characters remaining property to, and we can just use a span for that.
Since we’re not dealing with an input value here that the user can edit we use data dash bind with text instead, and we give it text colon characters remaining. Finally to activate the bindings we need to call ko, and we’ll pass in an instance of our contact view model. Let’s save and refresh our contact page and see what we have so far. We’ll just type a test message, and you can see that’s not very impressive, but when I tab away from the text area it does update the number of characters remaining.
That’s because by default the message observable is only going to notify observers when the value changes, and traditionally that means when the field loses focus, but we can change this easily by adding another property to text area data bind here called value update. The default is change, but we can also use input, key up, key press and after key down. I usually use after key down, but input is most reliable if a user has a reasonably up-to-date browser that supports the HTML 5 input event, and it can even detect pasting into the text area.
Let’s try that, and let’s also give the user a little more context for this number that’s appearing by putting the text characters remaining after the number. Let’s save and refresh. Now we get the desired effect even with cut and paste. We’ve begun to scratch the surface of what Knockout can do for us, and we’ve seen the ease with which we can set up dynamic behaviors and keep things in synch. In the next video we’ll build a simple grid with paging using Knockout for our checking account statement.
- Exploring ASP.NET routing
- Applying action selectors
- Working with layouts
- Employing HTML helpers
- Displaying and validating model properties
- Generating database objects with Entity Framework
- Adding transactions
- Authenticating users
- Unit testing
- Performing partial page updates with Ajax and jQuery
- Deploying ASP.NET MVC applications