JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<button>Add Item</button>

JavaScript

var data = [
    {name:"name1", age:"01"},
    {name:"name2", age:"02"},
    {name:"name3", age:"03"},
    {name:"name4", age:"04"},
    {name:"name5", age:"05"}
];


var model = Backbone.Model.extend({
    defaults:{
        name : "yet to be describe",
        age : "no age data"
    }
});

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

var view = Backbone.View.extend({
    initialize : function () {
        console.log ("view initiated");
    }
});

var views = Backbone.View.extend({
    initialize : function () {
        _.bindAll(this, 'render');
    },
    render : function () {
         console.log ( this.collection.length );
    }
})

var headerView = Backbone.View.extend({
    initialize : function () {
         _.bindAll(this, 'render');
    },
    render : function () {
        console.log ( this.collection.length );
    }
})

var coll = new collection(data);
var myApp = new views({collection : coll});
var header = new headerView({collection : coll});

$("button").on("click", function () {
    coll.add({name:("name"+(coll.size()+1)), age : coll.size()+1 });
})