主干样板布局管理器

Question

有人可以帮助解释/提供如何在骨干玻利尔板中使用布局管理器的示例吗？

在应用程序中.js我可以看到一个扩展主应用程序对象的 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;
    }

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

谢谢。

Answer 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.
});

我刚刚从我的一个应用程序中取了一个样本，但我相信你可以得到这个想法。我的主要布局基本上只是一个布局模板文件，其中包含元素，以便可以将视图注入到各自的持有者中。

Answer 2

你会像使用常规骨干View一样使用它。您可以使用它来创建新实例，而不是直接构建View。您发布的代码是object在Backbone Layout Manager扩展之上的包装器，el: #main设置为可覆盖的默认View元素。

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