CanJS & RequireJS TodoMVC Example

CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

CanJS - canjs.com

Learning CanJS

The CanJS website is a great resource for getting started.

Here are some links you may find helpful:

• Documentation
• Why CanJS
• Applications built with CanJS
• Blog
• Getting started video

Articles and guides from the community:

• Diving into CanJS

Get help from other CanJS users:

• CanJS on StackOverflow
• CanJS Forums
• CanJS on Twitter

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Implementation

CanJS is currently one of the few MVC libraries that fully supports the AMD module concept. Any part of CanJS may be loaded as its own module, which in turn only loads the dependencies actually required.

You can obtain the can object by requiring can/util/library. This will provide all utility functions and any loaded module. This makes it easier to move existing CanJS applications to RequireJS and use the utility functions.

define([
	'can/util/library',
	'can/control',
	'can/view/ejs
'], function (can) {
	can.Control // -> Construct
	can.view    // -> now able to render EJS views
});

For more information, read up in the Using CanJS - AMD section of the documentation.

The available modules are

• can/construct - Inheritable constructor functions
  • can/construct/super - Call super methods
  • can/construct/proxy - Proxy construct methods
• can/observe - Observable key-value bindings
  • can/observe/attributes - Attribute conversion and model associations
  • can/observe/backup - Backup and restore Observe states
  • can/observe/validations - Validate observes
• can/control - Declarative event bindings
  • can/control/plugin - Turns Controls into jQuery plugins
  • can/control/route - Declarative route bindings
• can/view - Template loading, caching, rendering
  • can/view/ejs - Live binding embedded JavaScript
  • can/view/mustache - Live binding Mustache / Handlebars templates
  • can/view/modifiers - Adds view rendering abilities to jQuery modifiers (like .html, .append etc.)
• can/route - Back button and bookmarking support

CanJS and JavaScriptMVC

CanJS is the extracted, more modern and more library-like MVC parts of JavaScriptMVC, formerly known as jQueryMX.

JavaScriptMVC 3.3 uses CanJS for the MVC structure so this TodoMVC example applies to JavaScriptMVC as well.

Additionally, JavaScriptMVC contains:

• CanJS - For the MVC parts
• jQuery++ - jQuery's missing utils and special events
• StealJS - A JavaScript package manager
• DocumentJS - A documentation engine
• FuncUnit - jQuery style functional unit testing

View engines

CanJS supports both live binding EJS and Mustache/Handlebars templates. By default the Mustache view will be used but an EJS example is available as well. You can easily change it by modifying the view option in the js/app.js file:

Models.Todo.findAll({}, function (todos) {
	new Todos('#todoapp', {
		todos: todos,
		state: can.route,
		view: 'views/todos.ejs'
	});
});