1

尝试解决这个问题已经花费了几个小时......虽然模型被正确获取并且我可以在视图被告知模型的“更改”事件时验证它,但它只是不渲染。启动时,默认模型数据('Test Project'),在视图中正确显示,但模型刷新后,视图不刷新。我试图在模型刷新后在布局中显示一个新视图,但它并没有太大变化......对此有任何想法或意见吗?

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

0 回答 0