Templates/Scaffolding is something that we are all used to nowadays, given that we use an IDE for development. Visual Studio is one popular IDE, that is very popular among people developing on the Microsoft platform. Visual studio comes with a lot of pre-installed templates and scaffolding templates and also has a rich extension support from the community. While developing on text editors(say like Sublime Text which is what I have been using), which are not for any specific technology you might not have all the templating and scaffolding supported right out of the box. You might find plugins for specific editors but not for all the frameworks that are available today.
Yeoman is the Web’s scaffolding tool for Modern Web Apps. Yeoman is a command line tool that runs over Node.js. Setting it up is pretty easy with the instructions here. To scaffold web applications, which is the same as creating a new project in Visual Studio from a template, we need to install framework specific generators for Yeoman. There are some `officially maintained generators and also ones that are maintained by the community.
$ npm install generator-ko
The generator creates the folder structure as shown here and by default has setup the required packages. It uses the following packages:
- Bootstrap: Responsive UI framework
- Crossroads: Routing Library
- Hahser: Browsing History Manager
- Jquery: Feature rich library
- Js-Signals: Custom/Event Messaging System
- Requirejs: File and Module Loader
- Requirejs-text: AMD loader plugin for text resources
There are three components: about-page, home-page and nav-bar. The main, index.html composes these components into the full blown view. The nav-bar component is referred as is and the home and about page are dynamically loaded based on the nav-bar menu interaction. As shown below the div binds to the component based on the selected route.We look further deep on how the view models bind and these components are tied together.
1 2 3 4
The knockout components are defined in the components folder and has both the html and js parts in the same component folder. Whenever the component is loaded the viewmodel defined in the corresponding js file gets bounded to it. This way of developments helps to keep different components of the app well separated as modules and compose them into the view as required.
Adding New Components
To add new components the knockout generator provides a command which generated the html/css components in the appropriate folder. You would still need to add the registration of the component in the startup file.
yo ko:component <component name>
This is just a starting point on building Single Page Applications using knockoutjs. Start on from here to build great web applications.