使用Backbone.js的多個頁面

Question

我使用的是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嗎？

Answer 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，我有一個非常強大的頁面模型，可以執行面包屑並根據狀態確定要突出顯示的導航按鈕。 您還可以在模塊中創建路由器以封裝功能，並在應用程序對象上公開Page模型，以便在整個應用程序中可用。

希望這可以幫助！