Tuesday, 12 June 2018

015 BackboneJS Collection reset,set,get,at,push

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>
<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 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



set :Set a value of attributes  on the model.

Syntax :model.set(attributes, [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">
student = Backbone.Model.extend({

defaults:

{

name: "",

class: ""

},

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

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

 syntax :model.get(attribute)

  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">


student = Backbone.Model.extend({

defaults:

{

name: "",

class: ""

},

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

at : Return a model from a collection, specified by index.

Syntax :collection.at(index)
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]);


var stuGet = new student();

stuGet = studentcollection.at(1);

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


</script>
</head>
</html>


Output :
List of added players : {"name":"John2","age":14} 

push :Merge a model at the end of collection.

Syntax : collection.push(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">

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.push(stuObj1);
studentcollection.push(stuObj2);
studentcollection.push(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}]





No comments:

Post a Comment

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

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