can.Model

  • constructor
 

can.Model([name,] staticProperties, instanceProperties)

Create a can.Model constructor. (See can.Construct for more details on this syntax.)

Parameters

  1. name {String}Optional

    If given, this will be the globally-available name of the constructor function.

  2. staticProperties {Object}

    The static properties of the class. See below for properties with special meanings to can.Model.

  3. instanceProperties {Object}

    The instance properties of instances of the class. These will usually be functions.

Returns

{function()}

A can.Model constructor.

new can.Model([options])

Creates a new instance of ModelConstructor.

Parameters

  1. options {Object}Optional

    Options to pass to setup or init.

Returns

{can.Model}

A new instance of ModelConstructor.

Model adds service encapsulation to can.Map. Model lets you:

  • Get and modify data from the server
  • Listen to changes by the server
  • Keep track of all instances and prevent duplicates in the non-leaking store

Get and modify data from the server

can.Model makes connecting to a JSON REST service really easy. The following models todos by describing the services that can create, retrieve, update, and delete todos.

Todo = can.Model.extend({
  findAll: 'GET /todos.json',
  findOne: 'GET /todos/{id}.json',
  create:  'POST /todos.json',
  update:  'PUT /todos/{id}.json',
  destroy: 'DELETE /todos/{id}.json' 
},{});

This lets you create, retrieve, update, and delete todos programatically:

Create

Create a todo instance and call save(success, error) to create the todo on the server.

// create a todo instance
var todo = new Todo({name: "do the dishes"})

// save it on the server
todo.save();

Retrieve

Retrieve a list of todos from the server with findAll(params, success(items), error):

Todo.findAll({}, function( todos ){

  // print out the todo names
  $.each(todos, function(i, todo){
    console.log( todo.name );
  });
});

Retrieve a single todo from the server with findOne(params, success(item), error):

Todo.findOne({id: 5}, function( todo ){

  // print out the todo name
  console.log( todo.name );
});

Update

Once an item has been created on the server, you can change its properties and call save to update it on the server.

// update the todos' name
todo.attr('name','Take out the trash')
  
// update it on the server
todo.save()

Destroy

Call destroy(success, error) to delete an item on the server.

todo.destroy()

Listen to changes in data

Listening to changes in data is a critical part of the Model-View-Controller architecture. can.Model lets you listen to when an item is created, updated, destroyed or its properties are changed. Use Model.bind(eventType, handler(event, model)) to listen to all events of type on a model and model.bind(eventType, handler(event)) to listen to events on a specific instance.

Create

// listen for when any todo is created
Todo.bind('created', function( ev, todo ) {...})

// listen for when a specific todo is created
var todo = new Todo({name: 'do dishes'})
todo.bind('created', function( ev ) {...})

Update

// listen for when any todo is updated
Todo.bind('updated', function( ev, todo ) {...})

// listen for when a specific todo is created
Todo.findOne({id: 6}, function( todo ) {
  todo.bind('updated', function( ev ) {...})
})

Destroy

// listen for when any todo is destroyed
Todo.bind('destroyed', function( ev, todo ) {...})

// listen for when a specific todo is destroyed
todo.bind('destroyed', function( ev ) {...})

Property Changes

// listen for when the name property changes
todo.bind('name', function(ev){  })

Listening with can.Control or can.Component

You can use can.Control or the events property of can.Component to listen to model changes like:

Todos = can.Control.extend({
  "{Todo} updated" : function(Todo, ev, todo) {...}
})