Using Backbone.js with Codenvy

Create a temporary Codenvy workspace with a simple backbone.js app, using Codenvy Factory:


With Backbone, you can easily represent your data as Models that you can create, validate, destroy, and of course save to the server. This is a popular library used in JavaScript development. Below is a simple tutorial on how to make a Hello World application using backbone.js, underscore.js and jquery.

Download JS libraries

First off, download backbone.js, underscore.js and jquery to your local machine.

Create a JavaScript Project and Upload Libs

Create a JavaScript project that will contain 3 JavaScript and one HTML file (index.html in our example):
project_structure

Create hello.js File

This is where some magic happens. Create a hello.js file with the following content:

(function($) {

    var UserInputView = Backbone.View.extend({

        el : '#UserInput',

        initialize : function() {
            this.helloListView = new HelloListView();
        },

        events : {
            'click button' : 'addToHelloCollection'
        },

        addToHelloCollection : function(e) {
            var hello = new Hello({
                name : this.$('input').val()
            });
            this.helloListView.collection.add(hello);
        }
    });

    var Hello = Backbone.Model.extend({
        initialize : function() {
            this.name = 'name'
        }
    });

    var HelloView = Backbone.View.extend({
        tagName : 'li',
        render : function() {
            $(this.el).html('Hello '   this.model.get('name'));
            return this;
        }
    });

    var HelloList = Backbone.Collection.extend({
        model : Hello
    });

    var HelloListView = Backbone.View.extend({

        el : '#HelloList',

        initialize : function() {
            _.bindAll(this, 'render', 'appendToHelloUL');
            this.collection = new HelloList();
            this.collection.bind('add', this.appendToHelloUL);
        },

        render:function(){

            $.each(this.collection.models, function(i, helloModel){
                self.appendToHelloUL(helloModel);
            });
        },

        appendToHelloUL : function(helloModel) {
            var helloView = new HelloView({
                model : helloModel
            });
            $(this.el).append(helloView.render().el);
        }
    });

    new UserInputView();

})(jQuery);

The app now has two Backbone views, namely:

  • UserInputView – responsible for listening to the events in user interface (in simple words, clicking mouse buttons) and updating the model object with what the user has keyed in
  • HelloListView listens to all changes in the model, simultaneously updating user interface

Create index.html File

Create a user interface for the application:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello Backbone</title>
  </head>
   <body>
     <header>
  	<h1>Backbone JS in Codenvy - Hello World!</h1>
    </header>
	<section id='UserInput'>
	Enter a name and click say hello!
	<input type="text" name="hello" placeholder="your friend name" value="Codenvy" /> &#160; <button>Say Hello</button>
    </section>
     <ol id="HelloList">
	</ol>
	<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="underscore-min.js"></script>
	<script type="text/javascript" src="backbone-min.js"></script>
	<script type="text/javascript" src="hello.js"></script>
    </body>
</html>

Run/Preview the App

Run or Preview the app from Run menu or click relevant icons on the Toolbar:

backbone