javascript - 使用 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 样板的一个很好的引用示例是: 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，我有一个非常强大的页面 制作面包屑并找出导航按钮的模型 根据状态突出显示。您还可以在模块内创建路由器 封装功能并在应用程序对象上公开页面模型，以便 它在您的整个应用程序中都可用。

希望这对您有所帮助!