The Knowledge Foundation

Tuesday, 12 June 2018

014 BackboneJS Collection toJSON,sync,add

toJSON : The Backbone.js toJSON model returns copy of the attributes as an object for JSON string.

Syntax : model.toJSON(options)

Example

<!DOCTYPE html>

<html>

<head>

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

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

var student = Backbone.Model.extend({

defaults:

{

}

});

var stuObj = new student();

document.write(JSON.stringify(stuObj));

</script>

</head>

</html>

Example

{"name":"john","class":"2"}

sync : Backbone sync to represent the state of a model to the server.

Syntax : model.sync(method, model, [options])

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}

add : Add method , to add a model or array of models to the collection.

Syntax : collection.add(models, [options])

Example

<!DOCTYPE html>

<html>

<head>

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

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

var student = Backbone.Model.extend({

defaults: {

age: 12

}

});

var StudentCollection = Backbone.Collection.extend({

model: student

});

var stuObj1 = new student({ name: "John1", age : 13 });

var stuObj2 = new student({ name: "John2", age: 14 });

var stuObj3 = new student({ name: "John3", age: 15 });

var studentcollection = new StudentCollection();

studentcollection.add([stuObj1, stuObj2, stuObj3]);

document.write('List of added players : ' + JSON.stringify(studentcollection.toJSON()));

</script>

</head>

</html>

Output :

List of added players : [{"name":"John1","age":13},{"name":"John2","age":14},{"name":"John3","age":15}]

Remove :To remove a model is removed from a collection.

Syntax : collection.remove(models,options)

Example

<!DOCTYPE html>

<html>

<head>

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

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 remove' + '');

objCollcetion.remove([obj2]);

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 remove
john3|4

013 BackboneJS Collection extend,model,modelId,constructor

Collections
A collection is a number of model used bind event. You can loop through collections and made change respective models. Collection support sorting and filtering. A model structure and instance should be created before creating a collection.Beside from their own events, collections also proxy through all of the events that occur to models within them.It also provides helper functions to perform aggregation and computation against a list of models.

The following lists of methods that you can use to work on Collection.

Syntax:
Backbone.Collection.extend(properties, classProperties)

Example

<!DOCTYPE html>

<html>

<head>

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

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 :johnclass :12

model : You must override model property of the collection class and specify the model class in collection contains.

Syntax: Backbone.Collection.model

Example

<!DOCTYPE html>

<html>

<head>

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

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

var student = Backbone.Model.extend({

defaults:

{

age: 12

}

});

var myCollcetion = Backbone.Collection.extend({

model: student

});

var myval = new myCollcetion({});

document.write("The values in the collection are: ", JSON.stringify(myval));

</script>

</head>

</html>

Output :

The values in the collection are: [{"name":"john","age":12}]

modelId :By default returns the value of the attributes' idAttribute from the collection, you can Override this method to return value.

Syntax: collection.modelId(attrs)

constructor / initialize :While creating a collection, you are open to pass in the initial array of models.If initialize function is there , it will be called during creation of collection.

Syntax: new Backbone.Collection([models], [options])

Example

<!DOCTYPE html>

<html>

<head>

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

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

var student = Backbone.Model.extend({

defaults: {

age: "12"

initialize: function () {

document.write("This is initialisation function");

}

});

var stuCollcetion = Backbone.Collection.extend({

model: student

});

var stuObj = new student({

age: "12"

});

var myval = new stuCollcetion([stuObj]);

document.write("
" + JSON.stringify(myval.models));

</script>

</head>

</html>

Output :

This is initialisation function
[{"name":"john","age":"12"}]

models : Collection of models that specify the array or models that are created inside of a collection.

Syntax: collection.models

Example

<!DOCTYPE html>

<html>

<head>

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

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

var student = Backbone.Model.extend({

defaults: {

age: "12"

}

});

var stuCollcetion = Backbone.Collection.extend({

model: student

});

var stuObj1 = new student({

age: "13"

});

var stuObj2 = new student({

age: "14"

});

var myval = new stuCollcetion([stuObj1, stuObj2]);

document.write("
" + JSON.stringify(myval.models));

</script>

</head>

</html>

Output:

[{"name":"john1","age":"13"},{"name":"john3","age":"14"}]

The Knowledge Foundation

Tuesday, 12 June 2018

014 BackboneJS Collection toJSON,sync,add

013 BackboneJS Collection extend,model,modelId,constructor

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

Labels

Report Abuse