Week Nine (MGDP2050)

Week Nine of Web Design and Development II (MGDP2050).

See also Week Eight (MGDP2050) - Week Ten (MGDP2050).

Lecture notes

See Week Nine lecture notes (MGDP2050).

Exercises: by next week

Goal: demonstrate Backbone.js

Demonstrate a simple Backbone.js application.

Study this example:

• Backbone sample environment

Compare the instructor's example:

• Backbone example 1

Create week9 folder and web page

In your local root folder, create a new folder named week9.

Inside your week9 folder, create a web page named index.html.

• Use your standard Bootstrap exercise layout and CSS
• Set the page title appropriately

underscore.js

Underscore.js is a JavaScript library. This library is required by Backbone.

Add a script element to your web page, like this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>

backbone.js

Backbone.js is a JavaScript library.

Add a script element to your web page, like this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>

HTML for the exercise

Add this HTML to your page:

		
<script id="new_person_template" type="text/template">    
 <label>
  Name:
  <input id="txtName" type="text" title="Type your name please" />
 </label>
 <button id="btnSubmit" type="button" value="Submit">Submit</button>
</script>

<script id="person_template" type="text/template">    
 Hello, my name is <%= name %>
</script>

			
<div id="container">	<!-- the #container element where Backbone renders its view -->
				
</div>	

Note that the script elements in the above HTML do not behave like standard scripts.

Instead, these script elements are use by Backbone.js to generate content.

Custom external JavaScript file

Add an external JavaScript file of your own, for your custom JavaScript. Like this:

<script src="backbone-exercise-1.js"></script>

For convenience, create your custom JavaScript file in the same folder as your exercise.

You could put your custom JavaScript file in your scripts (where your jQuery file is located).

However, the scripts folder is best used for external JavaScript files which will be shared by two or more web pages.

Since the external JavaScript for this exercise will not be shared by other web pages, it's fine to store the JavaScript file in the exercise folder.

Custom JavaScript file

Here is the JavaScript that goes in your custom JavaScript file:

// JavaScript for Backbone Exercise #1

window.app = {};

window.app.Person = Backbone.Model.extend({
    defaults: { name: "Type your name" },
    validate: function () { }
});

window.app.People = Backbone.Collection.extend({
    model: window.app.Person
});

window.app.NewPersonView = Backbone.View.extend({
    template: _.template($("#new_person_template").html()),
    initialize: function () {
        _.bindAll(this, 'submit');
    },
    events:
    {
        "click #btnSubmit": "submit"
    },
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
    submit: function (x, y, z) {
        var person = new window.app.Person({name: $("#txtName").val()});
        this.model.add(person);
    }
});

window.app.PersonView = Backbone.View.extend({
    tagname: "li",
    template: _.template($("#person_template").html()),
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

window.app.PeopleView = Backbone.View.extend({
    tagName: "ul",
   
    initialize: function() {
        _.bindAll(this, "render", "renderPerson");
        this.model.bind("add", this.renderPerson);
    },
    
    render: function() {
       console.log("rendering");
       this.model.each(this.renderPerson);
       return this;
    },
    
    renderPerson: function(person) {
        var personView = new window.app.PersonView({model: person});
        $(this.el).append(personView.render().el);
    }
});


$(document).ready(function () {

    var people = new window.app.People();
    var newPersonView = new window.app.NewPersonView({model: people});
    var peopleView = new window.app.PeopleView({model: people});

    $("#container").html(newPersonView.render().el);
    $("#container").append(peopleView.render().el);
});

Update your home page

On your Home page, make a link to this exercise.

Upload to web server

Upload your work to the classroom web server.

See also

• Web Design and Development II (MGDP2050)