The Knowledge Foundation

Monday, 11 June 2018

008 BackboneJS Model extend,constructor,get,set,escape

Models contain data of an application. Model contain business entity , with validation a business logic. Model is responsible to supply data to view and get data from view for storage. Model is core object of in JavaScript application.Below are the list of method that can be used .

extend
constructor / initialize
get
set
escape
has
unset
clear
id
idAttribute
cid
attributes
changed
defaults
toJSON
sync
fetch
save
destroy
validate
validationError
isValid
url
urlRoot
parse
clone
isNew
hasChanged
changedAttributes
previous
previousAttributes

1.extend : You can create custom Model class ,extend Backbone.Model and provide instance properties.

syntax :Backbone.Model.extend(properties, [classProperties])

Example

<!DOCTYPE html>

<html>

<head>

var student = new Backbone.Model({

});

document.write('Here is the result :' + student.get('name') + '|' + student.get('class'));

</script>

</head>

</html>

Output :
Here is the result :john|4

2.constructor / initialize :You can create instance of a model, you can pass in the initial values of the attributes to set model.
Initialize function is invoke when the model is created.

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

student = Backbone.Model.extend({

defaults:

{

initialize: function (a,b)

{

document.write("This is a initial function.");

this.set("name", a);

this.set("class", b);

}

});

var mymodel = new student('john',12);

document.write('Name :'+mymodel.get('name') + '');

document.write('class :' + mymodel.get('class') + '');

</script>

</head>

</html>

Output :

This is a initial function.
Name :john
class :12

3.get :Get the value of an attribute from the model.

syntax :model.get(attribute)

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

student = Backbone.Model.extend({

defaults:

{

initialize: function (a,b)

{

document.write("This is a initial function.");

this.set("name", a);

this.set("class", b);

}

});

var mymodel = new student('john',12);

document.write('Name :'+mymodel.get('name') + '');

document.write('class :' + mymodel.get('class') + '');

</script>

</head>

</html>

Output :

This is a initial function.
Name :john
class :12

4. set :Set a value of attributes on the model.

Syntax :model.set(attributes, [options])

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

student = Backbone.Model.extend({

defaults:

{

initialize: function (a,b)

{

document.write("This is a initial function.");

this.set("name", a);

this.set("class", b);

}

});

var mymodel = new student('john',12);

document.write('Name :'+mymodel.get('name') + '');

document.write('class :' + mymodel.get('class') + '');

</script>

</head>

</html>

Output :

This is a initial function.
Name :john
class :12

5.escape : Same like get, but returns the HTML-escaped version of a model's attribute.

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

student = Backbone.Model.extend({

defaults:

{

banner: ""

initialize: function (a, b) {

var htm = '

Name :

+ a + '
Ayan :' + b + '

this.set("banner", htm);

}

});

var mymodel = new student('john',12);

document.write('----------------Example of get------------');

document.write(mymodel.get('banner') + '');

document.write('----------------Example of escape------------');

document.write(mymodel.escape('banner') + '');

</script>

</head>

</html>

Output :

007 BackboneJS Built-in Events Reset,Sort,Change,Destroy

reset : Trigger if the collection's all contents have been reset.Passing empty will clear all option or you can specify your options.

Syntax

collection.reset([models], [options])
collection.reset()

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

var obj1 = Backbone.Model.extend({

defaults:

{

}

});

var objCollcetion = Backbone.Collection.extend({model: obj1});

var obj2 = new obj1({ name: "john2", class: "3" });

var obj3 = new obj1({ name: "john3", class: "4" });

var objCollcetion = new objCollcetion();

objCollcetion.add([obj2, obj3]);

document.write('Here is the result' + '');

objCollcetion.each(function (model, index, list)

{

document.write(model.get('name') + '|' + model.get('class') + '');

});

document.write('---------------------' + '');

document.write('Here is the result after reset' + '');

objCollcetion.reset();

objCollcetion.each(function (model, index, list)

{

document.write(model.get('name') + '|' + model.get('class') + '');

});

</script>

</head>

</html>

Output :

Here is the result
john2|3
john3|4
---------------------
Here is the result after reset

sort : Trigger if collection has been re-sorted.Collection with a comparator will sort itself whenever a model is added.

Syntax
collection.sort([options])

Example

<!DOCTYPE html>

<html>

<head>

var student = Backbone.Model.extend({

defaults:

{

}

});

var students =

[

{ name: 'John6', class: '3' },

{ name: 'John3', class: '4' },

{ name: 'John7', class: '9' }

];

var objCollcetion = new Backbone.Collection(students,

{

model: student,

comparator: 'name'

});

document.write('Here is the sorted result' + '');

objCollcetion.each(function (model, index, list)

{

document.write(model.get('name') + '|' + model.get('class') + '');

});

</script>

</head>

</html>

Output :

Here is the sorted result
John3|4
John6|3
John7|9

change :Trigger if model's attributes have changed.

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

var student = Backbone.Model.extend({

defaults:

{

initialize: function ()

{

this.bind("change:name", function (model)

{

document.write('You have changed your model , chnaged event fired');

});

}

});

var stuObj = new student();

document.write('Here is the result : ' + stuObj.get("name")+'');

stuObj.set({ name: 'john2' });

document.write('Here is the result : ' + stuObj.get("name") + '');

</script>

</head>

</html>

Output :

Here is the result : john
You have changed your model , chnaged event fired
Here is the result : john2

destroy :Trigger if model is destroyed.Destroys the model on the server by delegating an HTTP DELETE request to Backbone.sync.

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

type="text/javascript"></script>

Backbone.sync = function (method, model)

{

document.write(method + ": " + JSON.stringify(model) + "
");

model.set('id', 1);

};

var student = new Backbone.Model

({

});

student.save();

student.destroy();

</script>

</head>

</html>

Output :

create: {"name":"john","class":4}
delete: {"name":"john","class":4,"id":1}

The Knowledge Foundation

Monday, 11 June 2018

008 BackboneJS Model extend,constructor,get,set,escape

007 BackboneJS Built-in Events Reset,Sort,Change,Destroy

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

Labels

Report Abuse