Starting with an overview of the core concepts behind KnockoutJS to create a real-world application, you'll begin your journey by first learning to build a simplified version of Google Docs. You'll discover the power of data binding and dependency tracking to automatically keep various parts of your application in sync. Next, you’ll learn how you can use debugging techniques to track errors before moving on to creating a spreadsheet to represent more complex data structures. Lastly, you’ll learn how to create a form and then save and load a page using server side functionality.
The final section of the course lets you explore best practices and some additional tools you can use to ensure a maintainable code base.
Sometimes you have a property (such as a person's full name) that's dependent on other properties (such as first name and last name). KnockoutJS helps you keep track of those dependencies and propagates updates up the chain of dependencies.
One of the most common and useful features of any framework for creating a single page application is templating. While there are many excellent templating libraries out there, Knockout templates integrate well with KnockoutJS, allowing you to fully utilize all the other features of KnockoutJS.
Working on a data-centric application on the web can be tricky. KnockoutJShelps you work with data in a more object-oriented manner that is more appropriate when working with data.
When there are many parts to a system, it gets difficult to keep track of all of them simultaneously. With a smartly architectured KnockoutJS solution, it is possible to keep those components as separated as possible so we can work on them in smaller chunks at a time.
Most web developers are familiar with the Model View Controller (MVC) pattern. The MVVM pattern serves a similar purpose but is more suitable for two-way data binding. MVC is typically concerned with how to output the HTML, not how to interact back and forth with the DOM.
The simplest type of object we'll want to store in Knockout Docs is a basic document. We'll create an object to represent that document and bind it with Knockout.
We now have one document, but that by itself isn't that useful. With observable arrays, we can have Knockout change the tracking mechanism for the arrays of objects.
We now have a list of documents that we can display, but we need to be able to select one for editing or display. We can use an observable array to hold the currently selected document and use the with binding to display that document.
In server-side languages, you usually have a way to extract out parts of a view as separate files that can be included. Templates in Knockout can serve the same purpose. They can either be brought in using a server-side technology or we can use the KnockoutJS-External-Template-Engine library to bring them in asynchronously.
There are a number of common errors that developers new to Knockout encounter. We'll cover some of these common errors and how to resolve them.
A good library is helpful with debugging. Knockout offers a good amount of help with debugging. Here are some tips and tricks to help with debugging a Knockout application.
Knockout Context Debugger is a Chrome extension that lets you view the ViewModel of the currently selected DOM element.
We are now ready to create a new type of document. The spreadsheet type is a more complex type that illustrates a Knockout application better.
We have a class to represent the data. Now we need a way to display it.
We have a way to display and edit items, but we don't yet have a way for users to create new ones. We'll need to add some UI elements for item creation.
Now that we have a working spreadsheet and can create new ones, we need a way for users to add new rows and columns. In this section, we will focus on the ViewModel portion of that functionality.
A common operation that needs to be done is filtering. This is often tricky to do on the client side, but Knockout makes the process simple.
Another common feature that is needed is autosave. By taking advantage of the dependency tracking in computed properties, we can implement a smart autosave that only triggers when a change is made.
Sometimes we need to directly modify the UI. Custom bindings allow us to do that without having the logic in the ViewModel or in the view itself.
Knockout's extensibility means that there are many third-party custom bindings that can be treated as Knockout extensions. The sortable binding is a useful one for drag-and-drop reordering of items.
We will now create our final type, a survey. As with our other types, we will create a class to house the logic and data for our survey template.
We now have a survey class with one question type. Now we add another question type for checkboxes.
Now that we have a checkbox question with multiple options, we can add question types for radio buttons and select lists.
We can now edit our survey questions, but we still need a way to preview them. We can add a toggle to switch between the edit and preview mode.
A ViewModel has many properties that may not be appropriate or necessary to be saved. We can use the toJSON function to determine what gets serialized.
In addition to determining how to serialize data, we also need to determine how to populate the data retrieved from the server. We can create a complementary function called fromJSON to determine how to populate our classes from the server data.
We have now created a full single page application using KnockoutJS. There are many more advanced usage scenarios to be investigated further.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.