JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

JavaScript

// stores coordinate on map
var Coord = Backbone.Model.extend({
    defaults: {
        coord: 0
    }        
});

var coord = new Coord();

// holds representation of coordinate
var Foo = Backbone.Model.extend({
    
    defaults: {
        x: 0  
    },
    
    initialize: function() {
        // coordinate has been updated by one of many modules
        coord.on('change', function(m, options) {
            console.log('coord has changed to:', m.get('coord'), 'x is:', this.get('x'));
            
            if (!options.notify) {
                this.set('x', this.getX(m.get('coord')));
            }
        }, this);
        
        // need to update coordinate from this module
        this.on('change', function() {
            console.log('x has changed to:', this.get('x'), 'coord is:', coord.get('coord'));
            coord.set('coord', this.getCoord(this.get('x')), { notify : false });
        }, this);
    },
                
    getCoord: function(x) {
        return x * 17;
    },
            
    getX: function(coord) {
        return coord / 17 + _.random(-50, 50) / 100;
    }
});

var foo = new Foo();

foo.set('x', 20);