BB Skeleton

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>

SCSS

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

body {
    padding: 5%;
}

JavaScript

console.clear();

var data = {
	"request": "12345678",
	"success": true,
	"orders": [{
		"n": "Joe",
        "v": 123,
		"id": 1
	}, {
		"n": "Jane",
        "v": 456,
		"id": 2
	}]
};

var Order = Backbone.Model.extend({
	
    parse: function(response) {
	    console.log('Model parse before', response);
        
    	response.name = response.n;
        response.value = response.v;
        
        delete response.n;
        delete response.v;
        
        console.log('Model parse after', response);
    
    	return response;
    }
});

var Orders = Backbone.Collection.extend({
	model: Order,
    
    initialize: function() {
    	this.listenTo(this, 'update', function(model) {
        	console.log('Model update', model);
        });
        
        setTimeout(function() {
        	this.updateModel(2);
        }.bind(this), 1000);
        
        this.listenTo(this, 'change', function(model, options) {
        	console.log(model, options);
        });
    },
    
    updateModel: function(id) {
	    console.log('updateModel');
        
    	var modelToUpdate = this.findWhere({
            id: id
        });
        
        console.log('modelToUpdate', modelToUpdate);
        
        modelToUpdate.set({
        	"n": "Jane",
            "v": 985,
            "id": 2
        }, {
            parse: true
        });
    },
    
    parse: function(response) {
    	console.log('Collection parse', response.orders);
    	return response.orders;
    }
});

var orders = new Orders(data, {
	parse: true
});