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>

<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>


<script type="text/javascript">

var student = Backbone.Model.extend({
defaults:
{
name: "john",
class: "2"
}
});


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>

<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>


<script type="text/javascript">

Backbone.sync = function (method, model) {
document.write(method + ": " + JSON.stringify(model) + '');
model.set('id', 1);
};

var student = new Backbone.Model
({
name: "john",
class: 4
});

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>

<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>


<script type="text/javascript">

var student = Backbone.Model.extend({
defaults: {
name: "john",
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>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
<script type="text/javascript">

var obj1 = Backbone.Model.extend({
defaults:
{
name: "john",
class: "2"
}
});

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



No comments:

Post a Comment

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

  বাঙালি মানে ঘোড়া পাগল | দু একদিন ছুটি পেলো মানে বাঙালি চলল ঘুরতে | সে সমুদ্রই হোক , পাহাড়ি হোক বা নদী হোক। বাঙালির ...