CODEWITHSUNDEEP
javascriptjquerynode.jsbackbone.jsunderscore.js
OneScrewLoose
OneScrewLoose

Reputation: 143

Backbone js, external templates, w/o Requirejs

I'm trying to learn Backbone.js external templates without using Require.js like the this. But the templates doesn't show up and the div container remains empty though I found no errors. Here's the code I'm working on (I've included their paths, just in case):

scripts/main.js, which serves as my router

var AppRouter = Backbone.Router.extend({
routes: {
    "profile": "profile",
    "view": "view",
    "else": "notFound"
},

profile: function() {
     if (!this.profileView) {
        this.profileView = new ProfileView();
     }
     $('#global-content').html(this.profileView.el);
}
});

utils.loadTpl([
    'ProfileView'],
        function() {
            app = new AppRouter();
            Backbone.history.start();
        }
);

scripts/utils.js, which loads the templates

window.utils = {
loadTpl: function(views, callback) {

    var deferreds = [];

    $.each(views, function(index, view) {
        if (window[view]) {
            deferreds.push($.get('templates/' + view + '.html', function(data) {
                window[view].prototype.template = _.template(data);
            }));
        } else {
            alert(view + " not found");
        }
    });

    $.when.apply(null, deferreds).done(callback);
}
};

scripts/views/profile.js, the view has also the same code 

window.ProfileView = Backbone.View.extend({
initialize: function() {
    this.render();
},
render: function() {
    $(this.el).html(this.template);
    return this;
}
});

then I placed the templates in the same parent folder as scripts/

I've tried running them in the console and they work just fine, if that helps

profileView = new ProfileView()render();

profileView.el --which gives me the profile.html template correctly

I've read about Require.js but I want to do this without it.

thanks

Upvotes: 0

Views: 172

Answers (2)

OneScrewLoose
OneScrewLoose

Reputation: 143

Everything works well.

The problem is within the index.html, I used <div id='global-container'> but in main.js I called for #global-content

Upvotes: 0

Eugene Glova
Eugene Glova

Reputation: 1553

Please check this line

$(this.el).html(this.template);

it should be replaced with

$(this.el).html(this.template());

but if you say that this works I think it may be other problem

profileView = new ProfileView().render();
console.log(profileView.el);

Upvotes: 1

Related Questions