BB Skeleton

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/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<div class="js-app"></div>

<script type="text/x-handlebars-template" class="tmpl-view">
	<h1>View</h1>
    <p>{{id}}</p>
    <p>{{name}}</p>
</script>

SCSS

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

body {
    padding: 5%;
}

.view {
    background: white;
    padding: 5px;
    border: 1px solid #eee;
}

JavaScript

console.clear();

function outputData(id, name) {
	return {
    	id: id,
        name: name
    }
};

var Model = Backbone.Model.extend();

var Collection = Backbone.Collection.extend({
	model: Model,
    
    initialize: function() {
    	console.log('Collection');
    	this.listenTo(Backbone.Events, 'data:recieved', this.updateData, this);
    },
    updateData: function(response) {
    	console.log(response);
        var modelToUpdate = collection.findWhere({id: response.id});
        if(modelToUpdate) {
            modelToUpdate.set(response);
        }
    }
})

var View = Backbone.View.extend({

	className: 'view',
	
	template: Handlebars.compile( $('.tmpl-view').html() ),
    
    initialize: function() {
		this.listenTo(this.model, 'change', this.render);
    },
    
    render: function() {
    	this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var modelOne = new Backbone.Model({id: 1});
var modelTwo = new Backbone.Model({id: 2});

var collection = new Collection();

collection.add(modelOne);
collection.add(modelTwo);

var viewOne = new View({
	model: modelOne
});

var viewTwo = new View({
	model: modelTwo
});

$('body').append(
	viewOne.render().el,
    viewTwo.render().el
);

//updateData(1, 'Data for viewOne');
Backbone.Events.trigger('data:recieved', outputData(1, 'Data for viewOne'));

setTimeout(function() {
	//updateData(2, 'Data for viewTwo');
	Backbone.Events.trigger('data:recieved', outputData(2, 'Data for viewTwo'));    
}, 4000)