Monday, 11 June 2018

008 BackboneJS Model extend,constructor,get,set,escape

Models contain data of an application. Model contain business entity , with validation a business logic. Model is responsible to supply data to view  and get data from view for storage. Model is core object of in JavaScript application.Below are the list of method that can be used .
 
  1. extend
  2. constructor / initialize
  3. get
  4. set
  5. escape
  6. has
  7. unset
  8. clear
  9. id
  10. idAttribute
  11. cid
  12. attributes
  13. changed
  14. defaults
  15. toJSON
  16. sync
  17. fetch
  18. save
  19. destroy
  20. validate
  21. validationError
  22. isValid
  23. url
  24. urlRoot
  25. parse
  26. clone
  27. isNew
  28. hasChanged
  29. changedAttributes
  30. previous
  31. previousAttributes 

 1.extend : You can create custom Model class ,extend Backbone.Model and provide instance properties.

 syntax :Backbone.Model.extend(properties, [classProperties])

 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 = new Backbone.Model({
             name: "john",
            class: 4
});

document.write('Here is the result :' + student.get('name') + '|' + student.get('class'));

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


Output :
Here is the result :john|4  


2.constructor / initialize :You can create instance of a model, you can pass in the initial values of the attributes to set model.
Initialize function is invoke when the model is created.


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:
           {
             name: "",
            class: ""
          },
          initialize: function (a,b) 
       {
               document.write("This is a initial function.");

              this.set("name", a);
             this.set("class", b);
          }
    });

var mymodel = new student('john',12);

document.write('Name :'+mymodel.get('name') + '');
document.write('class :' + mymodel.get('class') + '');

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

Output :

This is a initial function.
Name :john
class :12


3.get :Get the value of an attribute from the model.

syntax :model.get(attribute)

<!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:
           {
             name: "",
            class: ""
          },
          initialize: function (a,b) 
       {
               document.write("This is a initial function.");

              this.set("name", a);
             this.set("class", b);
          }
    });

var mymodel = new student('john',12);

document.write('Name :'+mymodel.get('name') + '');
document.write('class :' + mymodel.get('class') + '');

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

Output :

This is a initial function.
Name :john
class :12

4. set :Set a value of attributes  on the model.


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

student = Backbone.Model.extend({
            defaults:
           {
             name: "",
            class: ""
          },
          initialize: function (a,b) 
       {
               document.write("This is a initial function.");

              this.set("name", a);
             this.set("class", b);
          }
    });

var mymodel = new student('john',12);

document.write('Name :'+mymodel.get('name') + '');
document.write('class :' + mymodel.get('class') + '');

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

Output :

This is a initial function.
Name :john
class :12

5.escape : Same like  get, but returns the HTML-escaped version of a model's attribute.


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:
{
banner: ""
},
initialize: function (a, b) {
var htm = '
Name :
+ a + '
Ayan :'
+ b + '
';
this.set("banner", htm);
}
});
           var mymodel = new student('john',12);

           document.write('----------------Example of get------------');
           document.write(mymodel.get('banner') + '');

           document.write('----------------Example of escape------------');
           document.write(mymodel.escape('banner') + '');

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

Output :


 




No comments:

Post a Comment

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

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