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):

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()

    var Hello = Backbone.Model.extend({
        initialize : function() {
   = '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);


            $.each(this.collection.models, function(i, helloModel){

        appendToHelloUL : function(helloModel) {
            var helloView = new HelloView({
                model : helloModel

    new UserInputView();


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">
    <title>Hello Backbone</title>
  	<h1>Backbone JS in Codenvy - Hello World!</h1>
	<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>
     <ol id="HelloList">
	<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>

Run/Preview the App

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