Backbone/Marionette ItemView not rendering on model change

问题

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;
}();

来源：https://stackoverflow.com/questions/16793422/backbone-marionette-itemview-not-rendering-on-model-change

标签

backbone.js

marionette