Generator-classical-ko NPM

Classical-Ko Generator for Yeoman

A Yeoman generator that creates a simple starting point for a knockoutjs SPA.

About

This generator is a fork of the fantastic 'generator-ko' by the brilliant Steven Sanderson.

The purpose of this fork was to simplify the original project, reducing dependencies and avoiding any transpilation of javascript. What's left are only static files. The aim is to be a simple starting point for a knockoutjs single page application that works out of the box. Also trying to provide a tad more documentation, as the original project is best documented in this video

There is a minuscule underlying preference for users of the Brackets.io text editor, but it's absolutely not a dependency.

Requirements

Since this is a Yeoman generator you will have to have installed node.js, which bundles npm.

And the Yeoman scaffolding tool. npm install -g yo in node.

How-to

Install

When that's all in place, you can install the generator npm install -g generator-classical-ko

Use

Scaffolding a new app

Navigate your terminal to where you want to scaffold up your starting point. Should be an empty folder.

Type yo classical-ko

Yeoman will start up and ask you some questions: 1. What's the name of your app 2. Do you want to include automated tests? (Intern) 3. What stylesheet language do you want to use? (Css or Less)

After that, you'll have a small simple app, as a starting point for your project.

Scaffolding new components

When you need a new component in your app you can scaffold one: yo classical-ko:component <newComponentName> This will add a component in src/components and register it in components.config.js

Scaffolding a new page

Almost the same as component yo classical-ko:page <newComponentName> This will add a page in src/pages and register it in components.config.js

Pages and components are essentially the same thing, but it's nice to have a logical separation in the folder tree.

Scaffolding a new binding

Bindigns are similar to components and pages yo classical-ko:binding <newComponentName> This will add a custom binding template in src/bindings and register it in require.config.js

A small note on choosing LESS

If you go down the less-route, you can use the gulp watch -task to transpile during development, or you can do it "manually" each time with gulp devLess. If you're using the Brackets.io text editor, I recommend the LESS AutoCompile extension. The style.less file has already been configured for this extension.

Testing

New in version 1.0.0 is the transition from Karma/Jasmine to the Intern. The intern is a complete framework for front-end application testing. Some gulp commands have been added for running the tests quickly: 1. gulp intern - This runs the unit tests in the console 2. gulp intern-web - This fires up the intern web-client (Beware of browser caching) 3. gulp test - A watch taks that runs the console client whenever source- or testcode changes. Protip: use --silent to suppress all gulp info in the console, like so: gulp test --silent