Deferred example

Deferred example

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div class="js-container">
</div>

<script type="text/template" id="my-template">
    <h3>Game of Thrones</h3>
    <p>name = <%- item.name %></p>
    <p>sigil = <%- item.sigil %></p>
    <p>words = <%- item.words %></p>
    <p>alliance = <%- item.alliance %></p>
</script>

JavaScript

//Mock Data
var mockData = {
    "name" : "Stark",
    "sigil": "Direwolf",
    "words": "Winter is coming"
};

//Service module for retreiving data.
var myService = {
    //Uses setInterval to mock latency using ajax.
    getData: function() {
        var int = 1;
        var deferred = $.Deferred();
        
        var timer = setInterval(function() {
            console.log(int);
            if (int === 3) {
                clearInterval(timer);
                deferred.resolve(mockData);
                console.log('Template rendered!!!');
            }
            int++;
        }, 1000);
        
        return deferred.promise();
    }
};

//Model
var MyModel = Backbone.Model.extend({
    defaults: {
        "name"    : null,
        "sigil"   : null,
        "words"   : null,
        "alliance": "king of the north"
    }
});

//View
var MyView = Backbone.View.extend({
    el: '.js-container',
    template: _.template( $('#my-template').html() ),
    render: function() {     
        this.$el.html( this.template({ item: this.model.toJSON() }) );
    }
});

//Controller to render view
var myController = {
    renderView: function() {
        var model;
        var view;
           
        myService
          .getData()
          .done(function(data) {
            model = new MyModel(data);
            view = new MyView({model: model});
            view.render();
          });
    }
};

myController.renderView();