Chapter 6. Packaged Elegance

First there was HTML and JavaScript, then CSS. Next came AJAX to usher in Web 2.0, as it is called. After that, templates drove us to a more dynamic, creative platform. The next advancement in web development was custom HTML components. KnockoutJS allows us to jump right in with some game-changing elegance for designers and developers. In this chapter, we will focus on:

• An introduction to components

• Bring Your Own Tags (BYOT)

• Enhancing attribute handling

• Making your own libraries

• Asynchronous module definition (AMD)—on demand resource loading

• Component-based Single-Page Applications (SPA)

This entire chapter is about packaging your code for reuse. Using these techniques, you can make your code more approachable and elegant.

Introduction to components

We hope you enjoyed learning about templates in the last chapter. Perhaps the best explanation of a component is a packaged template with an isolated ViewModel. Here is the syntax we would use to declare a like component on the page:

<div data-bind="component: "like"''"></div>

If you are passing no parameters through to the component, this is the correct syntax. If you wish to pass parameters through, you would use a JSON style structure as follows:

<div data-bind="component:
{name: 'like-widget',params:{ approve: like} }"></div>

This would allow us to pass named parameters through to our custom component. In this case, we are passing a parameter named approve. This would mean we had a bound viewModel variable by the name of like. Look at how this would be coded. Create a page called components.html using the _base.html file to speed things up as we have done in all our other chapters. In your script section, create the following ViewModel:

...

Enhancing attribute handling

Now, while custom tags are awesome, there is just something different about passing everything in with a single param attribute. The reason for this is that this process matches how our tags work when we are using the data-bind approach to coding. In the following example, we will look at passing things in via individual attributes. This is not meant to work as a data-bind approach, but it is focused completely on the custom tag element component.

The first thing you want to do is make sure this enhancement doesn't cause any issues with the normal elements. We did this by checking the custom elements for a standard prefix. You do not need to work through this code as it is a bit more advanced. The easiest thing to do is to include our Knockout components tag with the following script tag:

<script src="/share/js/knockout.komponents.js"></script>

In this tag, we have this code segment to convert the tags that start with kom- to tags that use individual...

Building your own libraries

Again, we are calling our custom components KOmponents. We will be creating a number of library solutions over time and welcome others to join in. Tags will not do everything for us, as there are some limitations yet to be conquered. That doesn't mean we wait for all the features before doing the ones we can for now. In the previous chapter, we showed a KOmponent tag for using templates. That is also included in the base KOmponent library.

In this segment of the chapter, we will also be showing some tags from our Bootstrap KOmponents library. First we will need to include the Bootstrap KOmponents library:

<script src="/share/js/knockout.komponents.bs.js"></script>

Above viewModel in our script, we need to add a function to make this section of code simpler. At times, when passing items into observables, we can pass in richer bound data using a function like this. Again, create this function above the viewModel declaration of the script, shown as follows...

Understanding the AMD approach

We are going to look into the concept of what makes an AMD-style website. The point of this approach to sites is to pull content on demand. The content, or modules as they are defined here, does not need to be loaded in a particular order. If there are pieces that depend on other pieces, that is, of course, managed. We will be using the RequireJS library to manage this part of our code.

We will create four files in this example, as follows:

• amd.html

• amd.config.js

• pick.js

• pick.html

In our AMD page, we are going to create a configuration file for our RequireJS functionality. That will be the amd.config.js file mentioned in the aforementioned list. We will start by creating this file with the following code:

// require.js settings
var require = {
    baseUrl: ".",
    paths: {
        "bootstrap":        "/share/js/bootstrap.min",
        "jquery":           "/share/js/jquery.min",
        "knockout":         "/share/js/knockout",
        "text":            ...

Component-based SPAs

Now, we can look at one of the fastest growing trends in web development, the concept of single-page applications. The name is fancier than the practice because it is wrapped in confusion, but we will help you get over that here.

First, think of your website as a computer or mobile device. You can put multiple applications on your system. The apps can work together or independently. While we understand this for our computing systems, we seem to get confused when we move to web servers. Everything is not one application, or better put, rarely should everything be one application. There was a day, before Windows, when your spreadsheet and your word processor were shipped as one application. This was very popular, but over time we figured out packaging two apps was smarter than trying to build cross functionality into one app. Thus, we created office suites.

Today, we are suffering from the effects of mistakes made on most server platforms. When our backend server languages...

What next?

There are many plugins and ways to package and advance your abilities as a developer using Knockout. I will be opening up a resource at http://knockout.developers.zone where we will be sharing links and tips, and hope to have a meet-up or two over the next year for fellow Knockout developers.

Summary

This chapter has pulled together concepts from every chapter and shown the awesome power of templates working together with ViewModels within Knockout components. You should now have an awesome foundation to do more with less than ever before. You should know how to mingle your jQuery code with the Knockout code side by side.

To review, in this chapter, we learned what Knockout components are. We learned how to use the components to create custom HTML elements that are interactive and powerful. We learned how to enhance custom elements to allow variables to be managed using the more common attributes approach. We learned how to use an AMD-style approach to coding with Knockout. We also learned how to AJAX everything and integrate jQuery to enhance Knockout-based solutions.

Many people struggle to understand the concept of SPA or single-page application sites. We were able to create a single-page application that provides understanding and perspective. In fact, this could be the beginning...