BB: Multiple Model Manager

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="js-app"></div>

<script type="text/x-handlebars-template" class="tmpl-person">
    <p>{{name}}</p>
    <p>{{country}}</p>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

var data = {
	"name": "Joe Bloggs",
	"country": "USA"
};

var OrderDetail__Model = Backbone.Model.extend({
	initialize: function() {
    	console.log('Set up subscriptions for Orders');

		this.orderDetail__marketDataModel = new OrderDetail__MarketDataModel();
        this.orderDetail__fillsModel = new OrderDetail__FillsModel();
    }
});

var OrderDetail__MarketDataModel = Backbone.Model.extend({
	initialize: function() {
    	console.log('Set up subscriptions for Market Data');
        
        setTimeout(function() {
	        var rand = Math.floor(Math.floor(Math.random() * (100 - 30)) + 30);
        	this.set({
            	id: rand,
                name: 'Market Data'+rand
            });
        }.bind(this), 5000);
    }
});

var OrderDetail__FillsModel = Backbone.Model.extend({
	initialize: function() {
    	console.log('Set up subscriptions for Fills');
        
        setTimeout(function() {
        	var rand = Math.floor(Math.floor(Math.random() * (100 - 30)) + 30);
        	this.set({
            	id: rand,
                name: 'Fills'+rand
            });
        }.bind(this), 7000);
    }
});

var OrderDetail__View = Backbone.View.extend({
	template: Handlebars.compile( $('.tmpl-person').html() ),
    
    initialize: function() {
    	this.listenTo(this.model.orderDetail__marketDataModel, 'change', function(model) {
        	console.log('orderDetail__marketDataModel Changed', model);
        });
        
        this.listenTo(this.model.orderDetail__fillsModel, 'change', function(model) {
        	console.log('orderDetail__fillsModel Changed', model);
        });
    },
    
    render: function() {
    	this.$el.html( this.template( this.model.toJSON() ) );
        return this;
    }
});

var orderDetail__model = new OrderDetail__Model();
console.log(orderDetail__model);

var orderDetail__view = new OrderDetail__View({
	model: orderDetail__model
});

$('.js-app').html( orderDetail__view.render().el );