主干样板布局管理器答案

【问题标题】：Backbone Boilerplate Layout Manager主干样板布局管理器
【发布时间】：2013-01-30 03:22:47
【问题描述】：

有人可以帮助解释/提供有关如何在 Backbone Bolierplate 中使用 LayoutManager 的示例吗？

在 app.js 中，我可以看到一个扩展主 app 对象的 useLayout 函数。在这里，它似乎正在设置一个基本布局元素：

// Helper for using layouts.
    useLayout: function(name, options) {
      // Enable variable arity by allowing the first argument to be the options
      // object and omitting the name argument.
      if (_.isObject(name)) {
        options = name;
      }

      // Ensure options is an object.
      options = options || {};

      // If a name property was specified use that as the template.
      if (_.isString(name)) {
        options.template = name;
      }

      // Create a new Layout with options.
      var layout = new Backbone.Layout(_.extend({
        el: "#main"
      }, options));

      // Cache the refererence.
      return this.layout = layout;
    }

正确吗？如果是这样，我是否以某种方式将“UseLayout”功能与应用程序路由器一起使用？ ...向主视图添加不同的 UI 元素/嵌套视图？

谢谢。

【问题讨论】：

标签： backbone.js backbone-boilerplate backbone-layout-manager

【解决方案1】：

我通常会有一个“app”对象来存储我在整个应用程序中所需的所有设置。然后，此对象扩展了一些有用的功能，例如您上面列出的功能。例如：

var app = {
  // The root path to run the application.
  root: "/",
  anotherGlobalValue: "something",
  apiUrl: "http://some.url"
};

// Mix Backbone.Events, modules, and layout management into the app object.
return _.extend(app, {
    // Create a custom object with a nested Views object.
    module: function(additionalProps) {
      return _.extend({ Views: {} }, additionalProps);
    },

    // Helper for using layouts.
    useLayout: function(options) {
      // Create a new Layout with options.
      var layout = new Backbone.Layout(_.extend({
        el: "#main"
      }, options));

      return this.layout = layout;
    },

    // Helper for using form layouts.
    anotherUsefulFunction: function(options) {
      // Something useful
    }

  }, Backbone.Events);

});

现在在我的路由器中，我会执行以下操作：

app.useLayout({ template: "layout/home" })
  .setViews({
    ".promotional-items": new Promotions.Views.PromotionNavigation(),
    ".featured-container": new Media.Views.FeaturedSlider({
      vehicles: app.vehicles,
      collection: featuredCollection
    })
}).render().then(function() {
  //Do something once the layout has rendered.
});

我刚刚从我的一个应用程序中抽取了一个样本，但我相信您可以理解。我的主要布局基本上只是一个布局模板文件，其中包含元素，因此可以将视图注入到它们各自的持有者中。

【讨论】：

太棒了 - 只是需要一个起始模板。谢谢！

【解决方案2】：

您可以像使用普通的 Backbone View 一样使用它。您可以使用它来创建一个新实例，而不是直接构建 View。您发布的代码是Backbone Layout Manager 扩展顶部的包装器object，其中el: #main 设置为可覆盖的默认View 元素。

var layout = new useLayout({ template: "#viewElement", ... });

【讨论】：