Question

有人可以帮助解释/提供如何在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;
    }

这是对的吗？如果是这样，我会以某种方式使用＆＃39; UseLayout＆＃39;功能与应用程序路由器？ ...将不同的UI元素/嵌套视图添加到主视图中？

感谢。

Answer 1

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

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

Answer 2

我通常会有一个“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.
});

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

骨干Boilerplate布局管理器

2 个答案: