1

有人可以帮助解释/提供有关如何在 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 元素/嵌套视图？

谢谢。

4

2 回答 2

1

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

var layout = new useLayout({ template: "#viewElement", ... });
于 2013-01-30T14:07:18.013 回答
1

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

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

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

于 2013-01-31T07:46:01.630 回答