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="getButton">Get Collection</button></p>
</div>

JavaScript

Person=Backbone.Model.extend({
initialize:function(){
    alert("Welcome to Model Initialization of name: " +this.get("name"));
    //this.set({name: "abc", age: "27"});

},
    defaults:{
        name: 'Ravi',
        age:   27
    }
});


PersonView = Backbone.View.extend({
    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 #getButton': 'getCollection'
     },

    getCollection:function(){
         console.log(this.collection.models);
         var data = this.collection.models;
         _.each([0,1,2], function(index){           console.log(data[index].get("name")); }, data);
        
        var filteredEl = _.filter(data,function(arrEl){ 
                  if(arrEl.cid === "c1" ){
                      return arrEl;
                  }
                });
        console.log("Using filter name of cid c1 is: "+filteredEl[0].get("name"));
    }
});

var PersonCollection=Backbone.Collection.extend({
model:Person
});

var person1= new Person({name:"Thomas",age:67});
var person2= new Person({name:"John",age:57});
var person3= new Person({});

var personcollection = new PersonCollection([person1,person2,person3]);

var personeview = new PersonView({el: $("#example_content"), model: person1, collection:personcollection});