Building HTML5 and JavaScript Apps with MVVM and Knockout

Learn how to build robust and maintainable Web applications with JavaScript patterns, MVVM, and KnockoutJS.
Course info
Rating
(880)
Level
Intermediate
Updated
Feb 14, 2012
Duration
4h 50m
Table of contents
Getting Started with Knockout and MVVM in JavaScript
Bindings and Observables
Built In Bindings
JavaScript Patterns: Spaghetti to Ravioli
Templates, Control of Flow, and Containerless Bindings
Custom Binding Handlers and Persisting Data
Description
Course info
Rating
(880)
Level
Intermediate
Updated
Feb 14, 2012
Duration
4h 50m
Description

Do you write a lot of HTML, JavaScript, and jQuery to push and pull data? Does your JavaScript seem to lack the structure and patterns of your non script code? In this course you will learn popular techniques to use data binding to bind your data to your target controls in HTML writing less code, but gaining more power. See how to consume json data, use json objects in JavaScript, and use declarative binding all by using the KnockoutJS JavaScript library. Learn how the XAML data binding paradigm has been brought to the web world with observable objects, change notifications, subscriptions, and 2 way bindings. Explore modern JavaScript patterns and practices that follow the SOLID principles, reduce errors in your code, and make code easier to maintain. After taking this course you will have a solid foundation for building robust web apps using common JavaScript patterns, MVVM, and KnockoutJS.

About the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Play by Play: Extending the Browser
Beginner
38m
30 Apr 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Getting Started with Knockout and MVVM in JavaScript
John Papa: Welcome to building HTML5 in JavaScript apps with MVVM and Knockout. My name is John Papa, and in this Pluralsight course, I'm going to walk you through what you need to know to build web apps using Knockout Library and the MVVM pattern along with JavaScript HTML and CSS. Along the way, I'm going to explore things like how to get started with Knockout, show some valuable resources and tools, demonstrate the various bindings that Knockout offers, and go through the templates, the control flow, binding handlers, and many, many other things that it has and offer some tips and tricks. In this first module, we'll start out by taking a look at the state of JavaScript development today, and how data binding in Knockout can play a role in that, and then we'll take a look at the MVVM pattern with the Knockout specifically and show you how you can use good separation patterns not just with other technologies but also with HTML5 and JavaScript development. Then we'll jump into some tools such as jsFiddle and show you how you can use some co-chairing tools like this to mock up some quick examples and to run some quick tests. It's great for sharing, especially if you don't have another environment like Visual Studio. And then we'll demonstrate how to use Knockout with Visual Studio, how to set up a project, look at the different extensions that you can use that I find really helpful not just with Knockout but with any JavaScript or HTML development that you can do. And then we'll wrap up this module by talking through some different resources that you can use when doing Knockout and pattern development. These resources include things such as where to find the source for Knockout so you can link to it, documentations, forms, other examples, some tutorials, some quick tips, and a great place that you can ask questions along the way as well. So with that, let's dive right in to using Knockout.

Bindings and Observables
( Silence ) Bindings and Observables are at the heart of how Knockout (Inaudible) work. So in this module, we'll take a deep look into how built-in bindings work and the different kinds of observables that you have at your disposal. But first, we'll take a look at how you deal with pushing and pulling data without using data binding and without using knockout. And then we'll show an example with knockout so we can see the value prop that it brings. Then we'll dive into observables, which we've already seen a few examples in Module One, how an observable field, basically, a property like first name can notify the screen and then come back and notify back to the object. And then sometimes you need to have computed observables. What computed observables are, it's like you have calculated fields or, in some cases, converters, where you can read and write values that may not exactly map one-to-one from a property in a source object to a target on the screen. So we'll explore how those work. Of course, sometimes you have properties that are observables, and sometimes you want to have arrays that are observables as well. So you might have an array where you want to be notified on the screen when an item has been added or removed or even replaced. We'll explore what you can do with those arrays, how they work with knockout and different functions that you can do upon them. And sometimes you want to be notified when an observable changes. So you can actually subscribe to the change event of an observable yourself and perform some custom action on those as well. So let's dive right into these fundamental concepts.

JavaScript Patterns: Spaghetti to Ravioli
There are a lot of helpful patterns that you can use to develop and write JavaScript with. Some of those patterns we'll going to take a look at here in this module to help us write some good Knockout code that's easier to maintain and helps us separate our concerns. That actually makes a little bit easier to write the code in some cases too. While there's a lot of JavaScript patterns that you can take advantage of, in this particular module, we're going to take a look at just some on that really help specifically with Knockout and that I deemed pretty easy to use and get out of the gate with. So we're going to start off by talking about spaghetti code in JavaScript and what that means and talk about some examples of where you can find spaghetti code in JavaScript. Then we'll move over to seeing how we can take that spaghetti code and turn it to ravioli code and what does that mean specifically? And I'll walk through several examples at how you can structure your JavaScript specifically with Knockout in mind, applying these patterns to show you how you can might make it a little bit easier to maintain and extend in long term. And that's the key with any pattern is you can understand the pattern and actually apply in a practical sense. It's a lot easier to deal with and maintain and you can really rip the benefits of it. The goal of these module is to help you take those patterns, understand them and actually apply them in a real way to using Knockout.

Templates, Control of Flow, and Containerless Bindings
As you start developing applications in Knockout, you're going to find yourself wanting more than just simple built-in bindings. And there's couple other features that are really, really advantageous. And some of my favorite of these are handling templates, control of flow, and containerless bindings. In this module, we'll show you how to use all of those. First, we're going to start out with name templates, showing you how you can create templates that could be easily reused throughout the application just by calling their name. The more we get into control of flow and show how we can use things like foreach statements and if statements right inside of our bindings. We'll talk about how binding context work for you as well so you can dive into an object hierarchy such as your inside of a template and then the context for the data might be, let's say a person, and you want to go back up to the root context that might be one of two levels up. You can use combining context to change the context from person up one or two or other types of levels. This is similar to using the RelativeSource ancestor binding that's in XML technologies. Inline templates are also very handy because you can create a template that is right inline with your HTML structure using this control flow statements which is very handy as well. And for those times when you want to be able to change the templates you might rendering from one template to other dynamically, we're going to talk about dynamically choosing a template and show you how to do that through Knockout. And templates also have binding helpers which allow you to pass data in or handle things like "After I rendered, what do I do? " or "Before I remove an item, what do I do? " So I'll show you how you can use some of those binding helpers. And then one of my favorite features is containerless bindings which is new with Knockout 2. 0. 0, it allows you to create-- containerless bindings means you don't have to actually have div tags and spans just to create some kind of a binding structure, you can actually do it with containerless bindings which are basically HTML comments, and these really come in handy in a lot of situations. So by then end of this module, you should have a great understanding about templates and control flow and all the different kind of binding context can help you build really robust Knockout applications. ( Pause )

Custom Binding Handlers and Persisting Data
In this module, we're going to show you a lot of things that kind of put a bow around Knockout and put it all together for you. We're going to start off by looking at some custom binding handlers. What they do for you is they allow you to extend and create more built-in binding types, more binding types to the built-in binding types that exist that exist already in Knockout, and they're really handy for doing things like integrating with jQuery UI and other libraries or putting animations into your applications. Next we'll look at unobtrusive JavaScript, which enables you to pull some of the data binding syntax out of your html and move it over to JavaScript, which some people really like, and then saving and loading data. While this isn't a Knockout feature so much, it's nice to show an end to end solution, which allows you to pull data in from AJAX and then save it as well. And then we'll take a look at some other features such as how to do change tracking in Knockout and how to do mapping of objects with Knockout, and these are both available on NuGet. So with that, let's dig right in.