Backbone Virtual Machine Demo

A simple Backbone virtual machine demo using handlebars templates.

by Adam Boduch

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<!-- A very basic "virtual machine list" handlebars template. -->
<script id="template-virtual-machine-list" type="text/x-handlebars-template">
    <h1>Virtual Machines</h1>
    <ul>
        {{#each virtualMachines}}
        <li><a href="#vms/{{id}}">{{name}}</a><em> ({{state}})</em></li>
        {{/each}}
    </ul>
</script>

<!-- A very basic "virtual machine details" handlebars template. -->
<script id="template-virtual-machine-details" type="text/x-handlebars-template">
    <h1>{{name}}</h1>
    {{#if running}}
    <a href="#" class="action-power-off">Power Off</a>
    {{/if}}
    {{#if off}}
    <a href="#" class="action-power-on">Power On</a>
    {{/if}}
</script>

CSS

body {
    font-size: 0.8em;
    font-family: Arial, sans-serif;
    margin: 1em;
}

JavaScript

// The mock API.
(function( $ ) {
    
    // The mock API data, nice and simple.
    var virtualMachinesJSON = [
        {
            id: 1,
            name: "VM1",
            state: "Running"
        },
        {
            id: 2,
            name: "VM2",
            state: "Off"
        }
    ];

    // Defines the mock virtual machine list API
    $.mockjax({
        url: "/api/vms",
        responseTime: 100,
        dataType: "json",
        response: function( options ) {
            this.responseText = virtualMachinesJSON
        }
    });
    
    // Defines the mock virtual machine details API. Looks up
    // a specific virtual machine by ID.
    $.mockjax({
        url: /\/api\/vms\/(\d)$/,
        urlParams: [ "id" ],
        responseTime: 100,
        dataType: "json",
        response: function( options ) {
            this.responseText = _.find( virtualMachinesJSON, { 
                id: +options.urlParams.id
            });
        }
    });
    
    // Defines the simple virtual machine action API. It
    // will update state of the virtual machine in the mock data.
    // Actions are "poweron" and "poweroff"
    $.mockjax({
        url: /\/api\/vms\/(\d)\/(\w+)$/,
        urlParams: [ "id", "action" ],
        responseTime: 200,
        dataType: "json",
        type: "POST",
        response: function( options ) {
            
            var vm = _.find( virtualMachinesJSON, {
                id: +options.urlParams.id    
            });
            
            if ( options.urlParams.action === "poweron" ) {
                vm.state = "Running";    
            }
            
            if ( options.urlParams.action === "poweroff" ) {
                vm.state = "Off";    
            }
            
            this.responseText = {};
        
        }

    });
    
})( jQuery );

// API is defined, now for the UI stuff...
(function( $ ) {
   
    // The virtual machine model.
    var VirtualMachine = Backbone.Model.extend({
        
 ...