JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<script src="https://rawgit.com/jashkenas/underscore/1.5.2/underscore-min.js"></script>
<script src="https://rawgit.com/jashkenas/backbone/1.0.0/backbone-min.js"></script>

JavaScript

// backbone.js example of modal

var alert = function (str) {
    var st = document.createTextNode(str);
    var p = document.createElement('p');
    p.appendChild(st);
    document.querySelector('body').appendChild(p);
}

// first using javascript
var Person = function (config) {
    this.name = config.name;
    this.age = config.age;
    this.occupation = config.occupation;
}
Person.prototype.work = function () {
    return this.name + ' is working.';
}
var person = new Person({
    name: "deepak sisodiya",
    age: 22,
    occupation: "Software engineer"
})
alert(person.name)
alert(person.age)
alert(person.occupation)
alert(person.work())

// using backbone.js
var Person2 = Backbone.Model.extend({
    defaults: {
        name: 'Guest User',
        age: 23,
        occupation: 'Worker'
    },
    work: function () {
        return this.get('name') + ' is working.';
    }
});
var person = new Person2;
alert(person.get('name'))
alert(person.get('age'))
alert(person.get('occupation'))

person.set('name', 'Taroon Tyagi')// will update the name
person.set('age', 26)             // will update the age
person.set('occupation', 'Graphics Designer')// will update occupation

// you can update the values in just on go
person.set({name:"Taroon Tyagi", age: 26, occupation: "Graphics Designer"})

alert(person.get('name'))
alert(person.get('age'))
alert(person.get('occupation'))

var person3 = new Person2({name:"deepak sisodiya", age: 22, occupation: "Graphics Designer"})

alert(person3.get('name'))
alert(person3.get('age'))
alert(person3.get('occupation'))

alert(person.get('name'))
alert(person.get('age'))
alert(person.get('occupation'))