Уничтожить или заменить представления Backbone JS, когда происходит изменение маршрута

У меня проблема с представлениями Backbone JS. Когда происходит изменение маршрута, создаются новые представления в соответствии с функцией маршрута. Но существуют и прежние взгляды. Поэтому существует несколько представлений, которые не могут выполняться. В верхней части каждого маршрута я хочу удалить текущее представление, а затем назначить ему новое представление. Это мой файл main.js

    return Backbone.Router.extend({
    routes: {
        "": "viewHome",
        "about": "viewAbout",
        "find-courses": "findCourses",
        "courses": "viewCourses",
        "*other": "defaultRoute"
    },
    viewCourses: function () {
        var courseCollection = new Courses();
        var fetchDone = function () {
            if(courseView && courseView.remove) courseView.remove();
            this.courseView = new CoursesView({
                collection: courseCollection
            });
            this.courseView.render();
        };
        var options = {
            success: _.bind(fetchDone, this),
            error: this.onError
        };
        courseCollection.fetch(options);
    },

    onError: function () {
        alert('Some Error!');
    },
    viewAbout: function () {
        this.aboutView = new AboutView();
        this.aboutView.render();
    }

Не могли бы вы помочь мне решить эту проблему?


routing backbone.js backbone-views backbone-routing
person Charith Prabhagya    schedule 27.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать что-то вроде

if(this.currentView) {
    this.currentView.remove();
}
this.currentView = new AboutView();

В каждом маршруте.

Конечно, вы можете улучшить его, выделив его в отдельный метод, который принимает новый конструктор представления при увеличении масштаба, что-то вроде

return Backbone.Router.extend({
  routes: {
    "courses": "viewCourses",
    "about": "viewAbout",
  },
  viewCourses: function () {
    var courseCollection = new Courses();
    courseCollection.fetch()
    .done((response => {
       const courseView = this.renderView(CoursesView, {
           collection: courseCollection
       });
    })
    .fail(this.onError);
  },
  viewAbout: function () {
    const aboutView = this.renderView(AboutView);
  },
  renderView(View, viewOptions) {
    this.currentView && this.currentView.remove();
    this.currentView = new View(viewOptions);
    this.currentView.render();
    return this.currentView;
  }
person T J    schedule 27.11.2019