JSFiddle - React, Tailwind, and code Playground

by dipti104

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<h1> Model Example: </h1>
<div id="example_content">
    <table cellpadding="10" border="2" width="70%" cellspacing="2">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr id="person_detail">
            <td class="name"></td>
            <td class="age"></td>
        </tr>     
    </table>
    <p><button id="resetButton">Reset</button></p>
</div>

JavaScript

Person=Backbone.Model.extend({
initialize:function(){
alert("Welcome to Model Initialization");
    //this.set({name: "abc", age: "27"});
},
    defaults:{
        name: 'abc',
        age:   27
    }
});
PersonView = Backbone.View.extend({
    model: Person,
    initialize:function(){
        this.render();
    },
    render:function(){
        var $target = this.$el;               $target.find('td.name').text(this.model.get("name"));                $target.find('td.age').text(this.model.get("age"));
    },
     events: {
         'click #resetButton': 'resetPerson',
     },
    resetPerson:function(){
        alert('reset to default');
        this.model.set({name:"abc",age:27});
        this.render();
    }
});
var person= new Person({name:"Thomas",age:67});
var personeview = new PersonView({el: $("#example_content"), model: person});