在 Marionette / Backbone.js 中渲染布局和子视图答案

【问题标题】：Rendering Layouts and sub-views in Marionette / Backbone.js在 Marionette / Backbone.js 中渲染布局和子视图
【发布时间】：2013-03-27 12:07:09
【问题描述】：

我有一个可行的解决方案，可以在我正在处理的 Marionette 应用程序中使用区域中的视图呈现布局，但感觉有些不对劲。是否必须将任何内容直接附加到 DOM？

这是我在控制器中的方法：

 //Grab the main Layout
        var layout = new APP.Views.LayoutView();

        //Render that layout
        layout.render();

         //Make the model
        var simpleModel = new APP.Models.simpleModel({
          "field1" : "foo",
          "field2" : "bar"
        });


        layout.header.show(new APP.Views.subView({model: simpleModel}));

        $('body').html(layout.el);

这是我觉得不自然的最后一部分。这主要是因为如果我将 'layout.header.show' 移到 .html() 之后，则它无法正确呈现。如果将区域推送到 DOM 后不能动态更改，那么区域的意义何在？

这是我的布局：

APP.Views.LayoutView = Backbone.Marionette.Layout.extend({

  template: "#layoutTemplate",

  className : 'wrapper',

  regions: {
    header: "#header",
    footer: "#footer"
  }


});

这是子视图：

APP.Views.subView = Backbone.Marionette.ItemView.extend({

    template : '#headerTemplate',

    className: 'container'


});

正如我所说，这可行，但感觉就像我没有正确使用区域。是否有更好、更简洁的方法来执行此操作，允许您在将布局渲染到 DOM 后访问区域？

在Marionette documentation 中似乎没有提到使用 .html() 来获取页面上的内容——我想知道这是因为不需要它还是假设它被遗漏了。

谁能帮忙？

【问题讨论】：

标签： javascript jquery model-view-controller backbone.js marionette

【解决方案1】：

好的，看来这可以通过在您的应用程序中创建一个“区域”来规避，然后使用 .show() 显示其中的布局。

这是我在 SO 上找到的一个小提琴链接：http://jsfiddle.net/TDqkj/6/

以及另一个问题：Understanding layouts in Marionette for Backbone.js

小提琴特别有这个代码：

App = new Backbone.Marionette.Application();
App.addRegions({
   'nav': '#nav',
  'content': '#content'
});

程序员用来向这些区域添加布局——这意味着你永远不必附加到 DOM。

如果其他人有更优雅的解决方案，请发布！

【讨论】：