Backbone.js : когда отображать виды при навигации по маршрутам

#views #routes #backbone.js

#число просмотров #маршруты #backbone.js

Вопрос:

Вот требования к моему базовому приложению

  • отображение списка папок, созданных пользователем
  • отображение содержимого папки при нажатии на папку

Вот как я это реализовал.

 AppRouter = Backbone.Router.extend({
    routes: {
      '': 'home',
      'get/:name/:id': 'contents'
    },

    home: function() {
        // show list of folders
    },

    contents: function(name, id) {
        // show contents of clicked folder
    }
});
 

Этот подход вызывает у меня проблемы, поскольку, когда я нажимаю на папку, маршрут сохраняется в истории браузера и имеет структуру «domain.com #get/folder / 1`. Если я случайно вставлю этот URL-адрес в адресную строку браузера, список папок не будет отображаться, поскольку он не соответствует маршруту.

Было бы разумной стратегией отображать список папок в initialize функции маршрутизатора? может быть создать просмотр страницы, который проверяет, были ли папки уже отображены или нет?

Ответ №1:

Если я правильно понимаю, список папок должен отображаться постоянно. И ваше приложение имеет два больших представления, список папок и содержимое. И список папок должен отображаться постоянно.

 var AppRouter = Backbone.Router.extend({
  // it's better to use REST names than custom ones
  routes: {
    '': 'index',
    'get/:id/:name': 'show'
  },

  initialize: function(options) {
    this.folders = new Folders(options.folders); // folders is your Backbone.Collection
    // always show the FoldersView, something like
    // new FoldersView({collection: this.folders, el: $('the folders container')})
  },

  index: function() {
     // probably clear the contents area, something like
     // $("#content").html('')
  }

  show: function(id, name) {
    var folder = this.folders.get(id);
    // create a view for this folder
    // and render it in the content area, something like 
    // view = new FolderView(model: folder)
    // $("#content").html(view.render().el)
  }
})