Backbone/Marionette ItemView not rendering on model change

Question

Already a couple of hours struggle trying to solve this... Although the model gets fetched correctly and I can verify it as the view gets informed of the model's 'change' event, it just does not render. At startup, the default model data ('Test Project'), is correctly displayed in the view, but after the model is refreshed, the view is not refreshed. I tried to show a new view in the layout after model refresh but it did not change much... Any idea or opinion about this ?

App.Project = function () {

    var Project = {};

    var ProjectModel = Backbone.Model.extend({
        defaults:{
            id:     0,
            name:       "Test Project",
            intro:      "",
            desc:       ""
        },
        initialize: function () {
            // Flag fetch status to avoid multiple simultaneous calls
            this.loading = false;
            var self = this;
            App.vent.on("project:display", function (_id) { self.fetchProject(_id); });
            },
        fetchProject: function (_id) {
            if (this.loading)
                return true;
            this.loading = true;

            var self = this;
            var id = _id;
            this.url = 'data.project_'+id+'.json';
            this.fetch({
                success: function (_data) {
                    self.loading = false;
                },
                error: function () {
                    self.loading = false;
                }
            });
        }
    });

    Project.Details = new ProjectModel();

    var Layout = Backbone.Marionette.Layout.extend({
        template: "#project-layout",
        regions: { details: "#project_details" }
    });

    Project.initializeLayout = function () {
        Project.layout = new Layout();
        App.content.show(App.Project.layout);
    };

    App.addInitializer(function () {
        App.Project.initializeLayout();
    });

    Project.display = function () {
        App.Project.Views.showDetails(Project.Details);
        App.vent.trigger("project:display", 1);
    }

    return Project;
}();


App.Project.Views = function () {
    var Views = {};

    var DetailView = Backbone.Marionette.ItemView.extend({
        template:   "#project-details-template",
        tagName:        "div",
        initialize: function () {
            //this.listenTo(this.model, "change", this.render, this);
        },
        modelEvents: {
            'change': "modelChanged"
        },
        modelChanged: function() {
            console.log(this.model);
            this.render();
        }
    });

    Views.showDetails = function (_project) {
        var projectView = new DetailView({model: _project});
        App.Project.layout.details.show(projectView);
    };

    return Views;
}();


App.ProjectRouting = function () {
    var ProjectRouting = {};

    ProjectRouting.Router = Backbone.Marionette.AppRouter.extend({
        initialize: function (_options) {
            this.route('project/',  "displayProject",   _options.controller.display);
        }
    });

    App.vent.on("project:display", function (_id) {
        App.navigate("project/");
    });

    App.addInitializer(function (_options) {
        ProjectRouting.router = new ProjectRouting.Router({
            controller: App.Project
        });
    });

    return ProjectRouting;
}();

Biggers

Could you post your view code? – Disruptive

You mean the template ? – Biggers

In fact, I finally made it work OK. Part of my data in JSON file was messing up with the template engine. So no backbone/marionette involved in the problem. Thanks for your help anyway ! – Biggers

Why do you have to listen for modelEvents change, doesn't itemview listen for model changes and update the view automatically? – Brower

The only downside to auto-magically re-rendering is there might be scenarios where you don't want the view to be destroyed? – Devastation

@backdesk, calling render won't destroy the view, it forces a repaint. – Alisa