fetch model from json - backbone.js

Question

Good morning, I have a simple json file and I need to fetch my data (I already read thousand of other question about it but not find a good solution for my app). I have a view, a model a json file. I can fetch my data but I can't display them. Here my code:

calendarDetails.json

{
"calendarTitle": "WebCal",
"calendarDescription": "Hello, I'm your new calendar"
 }

HeaderModel.js

    var HeaderModel = Backbone.Model.extend({
    isEdit: false,
    url: '/assets/calendarDetail.json'
});

headerModel = new HeaderModel();
headerModel.fetch();

HeaderView.js

var HeaderView = Backbone.View.extend({
    template: HandlebarsTemplates["header"],
    model: headerModel,

    initialize: function(){
        this.render();
        this.model.on('change', this.render, this);
    },

    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

app.js

$(function() {
    var CalendarApp = Backbone.View.extend({
        el: $('#wrap'),

        initialize: function(){
            this.headerModel = new HeaderModel();
            this.headerView = new HeaderView({
                model: this.headerModel,
                el: $('header')
            }),

            this.monthView = new MonthView({
                el: $("#calendarView")
            })
        }
    });

    var calendar = new CalendarApp;

});

I'm working with RubyonRails and Handelbars

Any help is really appreciated!!

Rida BENHAMMANE · Accepted Answer · 2014-03-06 09:06:40Z

1

You have to fetch your model :

$(function() {
    var CalendarApp = Backbone.View.extend({
        el: $('#wrap'),

        initialize: function(){
            this.headerModel = new HeaderModel();
            this.headerView = new HeaderView({
                model: this.headerModel,
                el: $('header')
            }); // semicolon here

            this.headerModel.fetch(); // Here

            this.monthView = new MonthView({
                el: $("#calendarView")
            }); // semicolon here
        }
    });

    var calendar = new CalendarApp;

});

Your problem is that in your HeaderModel.js you are instantiating your model and fetching it, so your model will be populated with your json file and that's it.

In your HeaderView.js your are affecting your model to the view class, nothing more, the view initialize and render functions are not yet called.

In your app.js when you instantiate your view

this.headerView = new HeaderView({
    model: this.headerModel,
    el: $('header')
})

your are overriding the previously set model with a new one this.headerModel so when the initialize and render are executed your new model this.headerModel is empty.

edited Mar 6, 2014 at 9:06

answered Mar 6, 2014 at 8:53

Rida BENHAMMANE

4,1291 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giorgia Sambrotta Over a year ago

Great! it works! So i always need to fetch the models two time? In the model instance and in the app.js?

Rida BENHAMMANE Over a year ago

No, it's not that. I'll explain more in the answer.

Collectives™ on Stack Overflow

fetch model from json - backbone.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related