The Knowledge Foundation

Tuesday, 12 June 2018

017 BackboneJS Collection sort,pluck,where,findWhere,url

sort :sort method re-sort a collection.

Syntax :collection.sort([options])

<!DOCTYPE html>

<html>

<head>

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

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

Example

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

pluck : Pluck an attribute from model in a collection.

Syntax : collection.pluck(attribute)

Example

<!DOCTYPE html>

<html>

<head>

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

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

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'

});

objCollcetion.pluck('name')

document.write("Attributes returned on pluck:
", objCollcetion.pluck('name'));

</script>

</head>

</html>

Output :

Attributes returned on pluck:
John3,John6,John7

where : where method retrieves and display the model by using the matched attribute in the collection.

Syntax :collection.where(attribute)

Example

<!DOCTYPE html>

<html>

<head>

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

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

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'

});

var myteam = objCollcetion.where({ name: 'John6' })

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

</script>

</head>

</html>

Output :

[{"name":"John6","class":"3"}]

findWhere : Similar to where, return first model in the collection with matches.

Syntax :collection.findWhere(attributes)

<!DOCTYPE html>

<html>

<head>

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

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

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'

});

var myteam = objCollcetion.findWhere({ name: 'John6' })

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

</script>

</head>

</html>

Output :

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

url : Returns the relative URL where the model's resource is located.

Syntax :model.url()

Example

<!DOCTYPE html>

<html>

<head>

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

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

var student = Backbone.Model.extend

({

urlRoot: '/tutorialspoint/backbonejs'

});

var stuObj = new student();

document.write(stuObj.url());

</script>

</head>

</html>

Output :
/tutorialspoint/backbonejs

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>

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

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

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.unshift(stuObj1);

studentcollection.unshift(stuObj2);

studentcollection.unshift(stuObj3);

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

document.write('');

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>

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

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

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>

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.push(stuObj1);

studentcollection.push(stuObj2);

studentcollection.push(stuObj3);

document.write('Length of Collcetion : ' + studentcollection.length);

</script>

</head>

</html>

Output :
Length of Collcetion : 3

The Knowledge Foundation

Tuesday, 12 June 2018

017 BackboneJS Collection sort,pluck,where,findWhere,url

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

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

Labels

Report Abuse