Несколько страниц с Backbone.js

Я использую Backbone Boilerplate https://github.com/tbranyen/backbone-boilerplate и не не знаю, как лучше всего обрабатывать более одной страницы. Я не могу найти ответ, который поможет мне легко понять. В общем, я думаю о таких вариантах:

  1. Должны ли на каждой странице быть разные config.js? Нравится config-userpage.js, config-homepage.js...?
  2. Должен ли я вместо этого иметь разные router.js для разных страниц? Как router-userpage.js или router-homepage.js,...?
  3. Должен ли я просто попробовать другой шаблон, например https://github.com/hbarroso/backbone-boilerplate? ?

comment
Я оставил вам комментарий к тому, о чем, как мне кажется, вы спрашиваете. Однако, если вы говорите о создании чего-то другого, кроме одностраничного приложения, то Backbone Boilerplate, вероятно, не подходит для этого лучше всего.   -  person tbranyen    schedule 18.02.2013
comment
Взгляните на мой блог здесь. Я задокументировал некоторые приемы, которые помогут вам создать гибридное приложение. blog.hasith.net/2012/11/ сколько-многостраничных-одностраничных.html   -  person Hasith    schedule 26.02.2013
comment
возможный дубликат Как мне использовать Backbone .js для многостраничного веб-приложения?   -  person THelper    schedule 31.03.2014


Ответы (1)


Вы определенно можете попробовать другой шаблон, но я не уверен, что это поможет. Несколько страниц можно получить разными способами.

Хороший справочный пример для Backbone Boilerplate: http://githubviewer.org/. Я выпустил все это как открытый исходный код, и вы можете посмотреть, как туда добавляются основные страницы.

Возможно, вы захотите проявить творческий подход и создать модель страницы, которая обрабатывает страницу, на которой вы находитесь, и внутри каждого маршрута, устанавливает новый заголовок страницы и какие макеты использовать.

Очень простая демонстрационная реализация внутри app/router.js может выглядеть примерно так:

define([
  // Application.
  "app",

  // Create modules to break out Views used in your pages.  An example here
  // might be auth.
  "modules/auth"
],

function(app, Auth) {

  // Make something more applicable to your needs.
  var DefaultPageView = Backbone.View.extend({
    template: _.template("No page content")
  });

  // Create a Model to represent and facilitate Page transitions.
  var Page = Backbone.Model.extend({
    defaults: function() {
      return {
        // Default title to use.
        title: "Unset Page",

        // The default View could be a no content found page or something?
        view: new DefaultPageView();
      };
    },

    setTitle: function() {
      document.title = this.escape("title");
    },

    setView: function() {
      this.layout.setView(".content", this.get("view")).render();
    },

    initialize: function() {
      // Create a layout.  For this example there is an element with a
      // `content` class that all page Views are inserted into.
      this.layout = app.useLayout("my-layout").render();

      // Wait for title and view changes and update automatically.
      this.on({
        "change:title": this.setTitle,
        "change:view": this.setView
      }, this);

      // Set the initial title.
      this.setTitle();

      // Set the initial default View.
      this.setView();
    }
  });

  // Defining the application router, you can attach sub routers here.
  var Router = Backbone.Router.extend({
    routes: {
      "": "index"
    },

    index: function() {
      // Set the login page as the default for example...
      this.page.set({
        title: "My Login Screen!",

        // Put the login page into the layout.
        view: new Auth.Views.Login()
      });
    },

    initialize: function() {
      // Create a blank new Page.
      this.page = new Page();
    }
  });

  return Router;

});

Как видите, это самоуверенный способ создания «страниц», и я уверен, что у других есть лучшие реализации. В Matchbox у меня есть очень надежная модель страницы, которая выполняет «хлебные крошки» и определяет, какие навигационные кнопки выделить, в зависимости от состояния. Вы также можете создавать маршрутизаторы внутри своих модулей, чтобы инкапсулировать функциональность и предоставлять модель страницы в объекте приложения, чтобы она была доступна во всем приложении.

Надеюсь это поможет!

person tbranyen    schedule 17.02.2013
comment
Итак, в вашем примере, как модель страницы узнает, на какой странице вы находитесь? Скажем, page1.html против page2.html, который является частью URL-адреса. Может я что-то пропустил... - person HP.; 18.02.2013
comment
Он работает на основе location.hash или pushState в браузерах с поддержкой HTML5. Это виртуальные страницы. Если вам нужны физические страницы, то Backbone Boilerplate (и, возможно, Backbone) не подходит для этой работы. - person tbranyen; 18.02.2013
comment
Я имею в виду физическую страницу. Но могут ли они просто сослаться на тот же config.js и начать оттуда, чтобы выяснить полный URL-адрес? - person HP.; 18.02.2013
comment
Я только что снова прочитал эту статью henriquebarroso.com/ и, похоже, вообще НЕ иметь нескольких физических страниц. По сути, файл index.html может быть просто файлом главного шаблона. Каждый URL будет обрабатываться одинаково. Единственная разница в этой структуре заключается в том, что вместо того, чтобы app.js указывал на инициализацию этой страницы, это в основном указывает на другой пакет, который обрабатывает конкретную страницу (или URL-адрес). Теоретически это все еще одностраничное приложение. Действительно, довольно умная идея. - person HP.; 20.02.2013
comment
githubviewer.org ‹- ссылка не работает... - person Arjan; 29.01.2021