BackboneJS allows the use of global events where applicable in the application Below is the list of built-in Backbone events, with arguments.You can also trigger your own events on Models.
Example of "add"
Output :
Here is the result
john2|3
john3|4
Example of "remove"
- "add" (model, collection, options) — To add a model to a collection.
- "remove" (model, collection, options) — To remove a model is removed from a collection.
- "update" (collection, options) — An event triggered after models have been added or removed from a collection.
- "reset" (collection, options) — Trigger if the collection's all contents have been reset.
- "sort" (collection, options) — Trigger if collection has been re-sorted.
- "change" (model, options) — Trigger if model's attributes have changed.
- "change:[attribute]" (model, value, options) — Trigger if a specific attribute has been updated.
- "destroy" (model, collection, options) — Trigger if model is destroyed.
- "request" (model_or_collection, xhr, options) — Trigger if a model or collection has started a request to the server.
- "sync" (model_or_collection, response, options) — Trigger if model or collection has been successfully synced with the server.
- "error" (model_or_collection, response, options) — Trigger if model's or collection's request to the server has failed.
- "invalid" (model, error, options) — Trigger if model's validation fails on the client.
- "route:[name]" (params) — Trigger by the router if a specific route is matched.
- "route" (route, params) — Trigger by the router if any route has been matched.
- "route" (router, route, params) — Trigger by history if any route has been matched.
- "all" — It fires for all the triggered events by the passing event name as the first argument.
Example of "add"
<!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')
+ '');
});
</script>
</head>
</html>
Here is the result
john2|3
john3|4
Example of "remove"
<!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
john2|3
john3|4
---------------------
Here is the result after remove
john3|4
No comments:
Post a Comment