What is CanJS?
CanJS is a lightweight, modern JavaScript MVVM framework, for building web applications, that provides a lightweight inheritance system, observable objects and values, and a powerful MVC core, with live-bound templates, among other resources. It makes developing complex applications simple and fast. Easy-to-learn, small, and unassuming of your application structure, but with modern features like custom tags and 2-way binding, creating apps is easy and maintainable.
CanJS is composed of following modules which are typically distributed as part of the core framework:
Setting up CanJS
CanJS can be downloaded or installed in many ways:
- npm
- the zip download (available on www.canjs.com)
- load from canjs cdn
- bower
Once downloaded or installed, CanJS can be loaded in a variety of ways:
- StealJS,
- RequireJS
- Browserify
- <script> tags
Here, I will explain one of the methods – i.e: using StealJS and NPM. (other ways of setting up canjs)
To use StealJS and CanJS, install the can, steal and jQuery packages:
> npm install can --save > npm install steal --save > npm install jquery --save
Create a stache template for your app:
File name: main.stache
<h1>{{message}}</h1>Create a main module for your application. Import CanJS’s core, jQuery, and your template.
File name: main.js
import can from "can"; import $ from "jquery"; import template from "./main.stache!";
var data = new can.Map({message: “Hello World”});
$(“body”).append(template(data));
Finally, create a page that loads js and specifies “main” as the main module:
<html> <body> <script src="./node_modules/steal/steal.js" data-main="main"></script> </body> </html>
Observables
Observables are special types of objects that can be observed and which respond to changes in their values. Observables are used to bind controllers to view in MVC structure of CanJS. Whenever an observable’s value is changed it will be reflected in the view automatically.
There are two kinds of observables in the core of CanJS objects.
- Map – used to create Objects
- List – used to create Arrays
Creating Instances
var employee = new can.Map({ name:’John’, eid:1234 });
employee.attr(‘name’); // Johnvar cityList = new can.List([‘Ahmedabad’,’Bangalore’,’Chennai’,‘Delhi’]);
cityList.attr(2); // Chennai
Manipulating properties
The attr method is used to read a property from, or write a property to an Observale Object and List.
var employee = new can.Map({ name:’John’, eid:1234 });
employee.attr(‘name’); // John
employee.attr(‘name’,’Bob’);
employee.attr(‘name’); // Bobemployee.attr({eid:3456, department: ‘Finance’});
employee.attr(); // {name: ‘Bob’, eid: 3456, department: ‘Finance’});
Responding to changes
When a property of an Observable object is changed, it emits an event with the changed property name, its old value and new value.
var employee = new can.Map({ name:’John’, eid:1234 });
employee.bind(‘name’, function(event, newVal, OldVal){
console.log(oldVal); // ‘John’
console.log(newVal); // ‘Bob’
});
employee.attr(‘name’, ‘Bob’);Stache templates
Stache templates look similar to normal HTML, but they contain optimized tags that contain a very simple language that can be used –
- lookup and insert values into the html output
- loop over arrays and can.Lists
- control-flow behavior like if and switch
- render other templates with partials
- perform custom control-flow behavior
Components
Component is an individual entity in an application which is encapsulated with its own view template, Javascript file and CSS file. A Component lets you reuse them across projects.
How to create a Component?
- To create a component first you need to import can.Component library.
- create a component – js
can.Component.extend({
tag: 'my-first-component',
template:can.view(my_first_component.stache'),
viewModel: {
message: 'Hello reader. Welcome to CanJS!'
}
});Create a template and bind a view-model to it.
<h1>{{ message }}</h1>Finally, we need to add reference to this component in tinde.html with a script tag.
<script src = "my_first_component.js"></script>
In my next blog I will cover Routing and Event handling in CanJS.
