Monday, 11 June 2018

007 BackboneJS Built-in Events Reset,Sort,Change,Destroy

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




sort : Trigger if  collection has been re-sorted.Collection with a comparator will sort itself whenever a model is added.


Syntax
collection.sort([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: "",
             class: ""
            }
           });


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

change :Trigger if model's attributes have changed.

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",
                                        class: "2"             
                                },
                               initialize: function () 
                  {
                              this.bind("change:name", function (model)
                              {
                                document.write('You have changed your model , chnaged event fired');
                              });
                            }
        });


var stuObj = new student();

document.write('Here is the result : ' + stuObj.get("name")+'');


stuObj.set({ name: 'john2' });


document.write('Here is the result : ' + stuObj.get("name") + '');
</script>
</head>
</html>

Output :

Here is the result : john
You have changed your model , chnaged event fired
Here is the result : john2

 
destroy :Trigger if model is destroyed.Destroys the model on the server by delegating an HTTP DELETE request to Backbone.sync.


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

         Backbone.sync = function (method, model) 
     {
                   document.write(method + ": " + JSON.stringify(model) + "
");
                   model.set('id', 1);
       };

       var student = new Backbone.Model
                ({
                             name: "john",
                             class: 4
                             });

       student.save();
       student.destroy();


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

Output :

create: {"name":"john","class":4}
delete: {"name":"john","class":4,"id":1}

 
- No comments:
Labels:

Friday, 8 June 2018

006 BackboneJS Built-in Events add , remove

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.


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

Output :

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
- No comments:
Labels:
Subscribe to: Posts (Atom)

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

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

  • 020 Weekend Tour Chandipur
    Another weekend Getaway of Odisha  is Balasore, commonly known as Baleshwar . Balasore is  a district  of Odisha,India. Chandipur : Chandi...
  • 019 C# Garbage Collcetion
    Garbage collection                    Garbage collection is a technique to recover the memory consumed by some unused variable and objec...
  • What is json.stringify ?
    What is json.stringify ? If the stringify method sees an object that contains a toJSON method, it calls that method, and stringifies the ...