Tuesday, 12 June 2018

016 BackboneJS Collection pop,unshift,shift,slice,length

pop :Remove the last model from a collection. 

Syntax :collection.pop([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('Before Pop Operation : ' + JSON.stringify(studentcollection.toJSON()));

document.write('')

studentcollection.pop(stuObj1);
studentcollection.pop(stuObj2);
studentcollection.pop(stuObj3);

document.write('')
document.write('After Pop Operation : ' + JSON.stringify(studentcollection.toJSON()));

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


Output:

Before Pop Operation : [{"name":"John1","age":13},{"name":"John2","age":14},{"name":"John3","age":15}]

After Pop Operation : []




unshift : Add  model at the beginning of a collection. 

Syntax : collection.unshift(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.unshift(stuObj1);
studentcollection.unshift(stuObj2);
studentcollection.unshift(stuObj3);


document.write('After unshift Operation : ' + JSON.stringify(studentcollection.toJSON()));

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

Output :

After unshift Operation : [{"name":"John3","age":15},{"name":"John2","age":14},{"name":"John1","age":13}] 


shift : Removes very first item from the collection.

Syntax : collection.shift(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.unshift(stuObj1);
studentcollection.unshift(stuObj2);
studentcollection.unshift(stuObj3);


document.write('After unshift Operation : ' + JSON.stringify(studentcollection.toJSON()));

document.write('');
studentcollection.shift();
studentcollection.shift();
studentcollection.shift();

document.write('');

document.write('After shift Operation : ' + JSON.stringify(studentcollection.toJSON()));

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


Output :

After unshift Operation : [{"name":"John3","age":15},{"name":"John2","age":14},{"name":"John1","age":13}]

After shift Operation : []


slice : Return a shallow copy of this collection models.

Syntex :collection.slice(begin, end)

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 country = Backbone.Model.extend();

var countries = ['India', 'USA', 'China', 'UK', 'Brazil'];


var cities = new Backbone.Collection(countries, {
model: country
});

var some_country = countries.slice(1, 4);


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

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

Output :

["USA","China","UK"]


length : Return number of models it contains. 

Syntax :collection.length

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('Length of Collcetion : ' + studentcollection.length);




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



Output :
Length of Collcetion : 3






No comments:

Post a Comment

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

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