Backbone Rendering Issue

Question

I am using the template of JBoss Backbone Sample

I have

Model:      State
Collection: States 
View:       StatesView 
HTML:       state.html 
and a       Router.

The problem is my State.html is not getting rendered. REST call to retrieve the Model is fine.

I just wanted to see the html is picked up and renders. am I missing/misusing something? No errors in the logs.

router/router.js

define("router", [
        'jquery',
        'underscore',
        'configuration',
        'utilities',
        'app/models/state',
        'app/collections/states',
        'app/views/desktop/states'
    ],function ($,
                _,
                config,
                utilities,
                State,
                States,
                StatesView) {

        var Router = Backbone.Router.extend({
            initialize: function() {
               Backbone.history.start();
            },
            routes:{
                "":"states",
                "states":"states",
                "ignore":"ignore",
                "*actions":"defaultHandler"
            },
            states:function () {

                var states = new States();
                var statesView = new StatesView({model:states, el:$("#content")});
            }
        });

        var router = new Router();
        return router;
    });

model/state.js

define([ 
        'configuration',
        'backbone'
    ], function (config) {

        var State = Backbone.Model.extend({
            urlRoot: config.baseUrl + 'rest/states'
        });
        return State;
    });

collection/states.js

define([
        'app/models/state',
        'configuration',
        'backbone'
    ], function (State, config) {

        var States = Backbone.Collection.extend({
            url: config.baseUrl + 'rest/states',
            model: State,
            id:'mid'
        });
        return States;
    });

views/desktop/states.js

define([
    'utilities',
    'text!../../../../templates/desktop/states.html'
], function (
    utilities,
    statesTemplate) {

    var StatesView = Backbone.View.extend({
        render:function () {
            utilities.applyTemplate($(this.el), statesTemplate, {model:this.model})
            return this;
        }
    });
    return  StatesView;
});

and, templates/desktop/states.html

<div>
<h1>Test</h1>    
</div>

utilities.js

define(['underscore', 'backbone'], function (_, Backbone) {

    var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    var monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"];


    Date.prototype.toPrettyString = function () {
        return dayNames[this.getDay()] + " " +
            this.getDate() + " " +
            monthNames[this.getMonth()] + " " +
            this.getFullYear() + " at " +
            this.getHours().toZeroPaddedString(2) + ":" +
            this.getMinutes().toZeroPaddedString(2);
    };

    Date.prototype.toPrettyStringWithoutTime = function () {
        return dayNames[this.getDay()] + " " +
            this.getDate() + " " +
            monthNames[this.getMonth()] + " " +
            this.getFullYear();
    };

    Date.prototype.toYMD = function () {
        return this.getFullYear() + '-' + (this.getMonth() + 1).toZeroPaddedString(2) + '-' + this.getDate().toZeroPaddedString(2);
    };

    Date.prototype.toCalendarDate = function () {
        return { 'day':this.getDate(), 'month':this.getMonth(), 'year':this.getFullYear()};
    };

    Date.prototype.withoutTimeOfDay = function () {
        return new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0, 0);
    };

    Date.prototype.asArray = function () {
        return [this.getFullYear(), this.getMonth(), this.getDate()];
    };


    Date.prototype.toTimeOfDay = function () {
        return { 'hours':this.getHours(), 'minutes':this.getMinutes(),
            'seconds':this.getSeconds(), 'milliseconds':this.getMilliseconds()};
    };

    Date.prototype.diff = function (other) {
        return parseInt((this.withoutTimeOfDay().getTime() - other.withoutTimeOfDay().getTime()) / (1000.0 * 60 * 60 * 24));
    };

    Number.prototype.toZeroPaddedString = function (digits) {
        val = this + "";
        while (val.length < digits) val = "0" + val;
        return val;
    };

    Backbone.View.prototype.close = function(){
        $(this.el).empty();
        this.undelegateEvents();
        if (this.onClose){
            this.onClose();
        }
    };

    // utility functions for rendering templates
    var utilities = {
        viewManager:{
            currentView:null,

            showView:function (view) {
                if (this.currentView != null) {
                    this.currentView.close();
                }
                this.currentView = view;
                return this.currentView.render();
            }
        },
        renderTemplate:function (template, data) {
            return _.template(template, (data == undefined) ? {} : data);
        },
        applyTemplate:function (target, template, data) {
            return target.empty().append(this.renderTemplate(template, data));
        }
    };

    return utilities;

});

Thanks

Answer 1

Try passing the el as a string not a jquery reference.

var statesView = new StatesView({model:states, el:'#content'});

also, where you use the el $(this.el) change this to this.$el instead.