JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

JavaScript

// define class "BOOK"
Book = Backbone.Model.extend({
  initialize:function(){
    // capture model change event
    this.on("change change:name", function(){
      console.log('Model Changes Detected!!');
      
      // use of hasChanged() method
      if(this.hasChanged('name')){
        console.log('name change detected');
      }
      
      // get list of attributes where values have been changed
      console.log('changed attributes' + JSON.stringify(this.changed));
      
    });
    
    // invalid 
    this.on('invalid', function(model, error) {
      console.log('** validate error : ' + error + '**');
    });
  },
  
  defaults:{
    name : 'My Backbone First Training',
    author: 'Lokesh Yadav'
  },
  
  printDetails: function(){
      console.log('>>>' + this.get('name'));
  },
  
  validate: function(attrs){
    if(attrs.year < 2000) {
        return 'year must be after 2000'
    }
  }
  
});

// create new instance of class "BOOK"
//var book = new Book();

//console.log(book.defaults.name);
//console.log(book.defaults.author);
//console.log(book.get('name'));

// pass values during object creation
var thisBook = new Book({
  name : 'First day training on Backbone JS',
  author: 'Lokesh Yadav'
});

// use of GET method
//console.log(thisBook.get('name') + ' by ' + thisBook.get('author'));

// get default attributes
//console.log(thisBook.attributes);

// change attributes value
thisBook.set('name', 'First day of Backbone training');

// create new attribute in the defaults
thisBook.set('year',2015, {silent: true});

// validate while setting object
thisBook.set('year',1983, {validate: true});

// delete an attribute
//thisBook.unset('year');
//console.log(thisBook.year);

// check the presence of attribute
//console.log(thisBook.has('year'));

// remove all attributes
//thisBook.clear();
//console.log(typeof(thisBook));
//console.log(thisBook.has('author'));
//console.log(thisBook); // attribute is now a blank attribute

//create a clone of...