Fetching a single model using backbone.js

Question

In my backbone.js code I've been trying to fetch a single model from a url. I must be doing something wrong since my model never gets filled using fetch().

I tried finding solutions on the internet, but I can't figure out what I'm doing wrong.

Any help is much appreciated!

I've got a JSON file looks like this:

JSON = { size : 'small' , username : 'jasper' , messages : '3' }

And the code:

(function($){

Header=Backbone.Model.extend({

    defaults:{

        size:"large",

    },

    urlRoot:'urltofile.json',

});

header=new Header();

var HeaderView=Backbone.View.extend({

    events:{    
        'click #header_account_options_login':'loginClicked'
    },

    initialize:function(){

        $(this.el).append('<div id="header"></div>');

        _.bindAll(this,'render','loginClicked');

        dust.loadSource(dust.compile($(this.options.tpl).html(),'header-template'));

        this.model.bind('change',this.render,this);

        this.render();

    },

    render:function(){

        var_self=this;

        dust.render('header-template',this.model.toJSON(),function(error,rendered){

            $('#header').replaceWith(rendered);

        });

        return this;

    },


    loginClicked:function(){

        this.model.fetch();
        console.log(this.model);

    }

});

var headerView=new HeaderView({

    el:'#container',
    tpl:'#header-template',
    model:header

});

})(jQuery);

Answer 1

I found the problem in the JSON being incorrect. Fixing the JSON solved the issue