Wednesday, 13 June 2018

018 BackboneJS Collection parse,clone,fetch,create

parse : This method returns the collection's data data by passing through the response object and represents the data in JSON format.

Syntax : collection.parse(response, 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 myData = {
                "values": [{
                "name": "john",
                "age": "12"
                  }]
              };

var student = Backbone.Collection.extend({
                        model: myData,
                       parse: function (response, options) 
                    {
                                      document.write(JSON.stringify(response));
                                   }
});

var stuObj = new student(myData, { parse: true });
</script>
</head>
</html>

 Output :

{"values":[{"name":"john","age":"12"}]} 

clone : Returns a new instance of the collection just coping one collection to another object.

Syntax : collection.clone()



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]);


var clonedCollection = objCollcetion.clone();

document.write("The new instance of collection is: ", JSON.stringify(clonedCollection));
</script>
</head>
</html>

Output :
The new instance of collection is: [{"name":"john2","class":"3"},{"name":"john3","class":"4"}] 


fetch :fetch method , fetch default set of model in the collection and communicate the sync method.

Syntax :
collection.fetch(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 objCollcetion = new objCollcetion();


objCollcetion.url = '/accounts';


Backbone.sync = function (method, model) {
document.write(method + ": " + model.url);
};

objCollcetion.fetch();

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

Output :
read: /accounts  


create : Create method is used to create a new instance of the model in the collection.

Syntax : collection.create(attributes, [options])



<!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 objCollcetion = new objCollcetion();




Backbone.sync = function (method, model) {
document.write(JSON.stringify(model));
};

var othello = objCollcetion.create({
name: "john2",
class: "27"
});

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


Output :
{"name":"john2","class":"27"}


 

No comments:

Post a Comment

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

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