Backbone / Marionette ItemView wird bei Modellwechsel nicht gerendert

Es gibt schon ein paar Stunden Mühe, dies zu lösen ... Obwohl das Modell korrekt abgerufen wird und ich es überprüfen kann, wenn die Ansicht über das Änderungsereignis des Modells informiert wird, wird es einfach nicht gerendert. Beim Start werden die Standardmodelldaten ('Testprojekt') in der Ansicht korrekt angezeigt. Nach dem Aktualisieren des Modells wird die Ansicht jedoch nicht aktualisiert. Ich habe versucht, nach der Modellaktualisierung eine neue Ansicht im Layout anzuzeigen, aber es hat sich nicht viel geändert ... Irgendeine Idee oder Meinung dazu?

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

Antworten auf die Frage(0)

Ihre Antwort auf die Frage