JSFiddle - React, Tailwind, and code Playground

by agorur

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="bb_container">BackBone</div>

<div id="counterHolder">
    <div id="counter"><span>AddCounter</span>
        <button id="add-button">ADD</button>
    </div>
</div>

JavaScript

CounterModel = Backbone.Model.extend({
    defaults: {
        "count": 1
    },

    increase: function() {
        var countValue = parseInt(this.get("count") + 1);
        this.set("count", countValue);
    }
});

CounterView = Backbone.View.extend({
    initialize: function() {
        this.render = _.bind(this.render, this);
        this.render();
        this.model.bind('change:count', this.render);
    },

    el: "#counter",

    events: {
        "click #add-button": "add",
        "blur #add-button": "message"
    },

    message: function() {
        $('#counter span').text('Guess the value');
    },

    add: function() {
        this.model.increase();
    },

    render: function() {
        $('#counter span').text(this.model.get("count"));
    }

});

var counterModel = new CounterModel();
var counterView = new CounterView({
    model: counterModel
});