Monday, 11 June 2018

010 BackboneJS Model attributes,Changed,defaults,toJSON,sync,fetch,save

attributes : Attributes define property of a model.
Syntax : model.attributes

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

student = Backbone.Model.extend({
                 defaults:
                 {
                     idAttribute: 'id',
                     name :'',
                     age :''
                    }
                   });

var person = new student();

person.set({ id: "2" });
person.set({ name: "John" });
person.set({ age: "12" });

document.write(person.get('name') + '|' + person.get('age'));


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


Output :
 John|12

Changed
This method changes all the attributes which change after setting the attributes using the set() method.


 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 : johnYou have changed your model , chnaged event firedHere is the result : john2


defaults : While creating instance of the model, attributes will be set to their default value.
 

Syntax :model.defaults()


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"
              }
});


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
Here is the result : john2


toJSON : The Backbone.js toJSON model returns copy of the attributes as an object for JSON string.
 

Syntax : model.toJSON(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",
                               class: "2"
                          }
                          });


var stuObj = new student();

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

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

Output :

{"name":"john","class":"2"}


sync : Backbone sync to represent the state of a model to the server.

Syntax : model.sync(method, 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">

           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}



fetch :This method accepts data from the server by delegating the sync() method from model. 

Syntax :model.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">

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

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






Output :

read: {"name":"john","class":4}

save : Save a model to your database with indicating to Backbone.sync.

Syntax : model.save([attributes], [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">

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

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




Output :


 create: {"name":"john","class":4}






















No comments:

Post a Comment

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

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