javascript - 在 Marionette/Backbone.js 中渲染布局和 subview

Question

在我正在处理的 Marionette 应用程序中，我有一个关于在区域中使用 View 渲染布局的有效解决方案，但感觉有些不对劲。您必须将任何内容直接附加到 DOM 吗？

这是我在 Controller 中的方法:

 //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"
  }


});

这是 subview :

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

    template : '#headerTemplate',

    className: 'container'


});

正如我所说，这行得通，但感觉我没有正确使用区域。有没有更好、更简洁的方法可以让您在将布局渲染到 DOM 后访问区域？

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

有人能帮忙吗？

Answer 1

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

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

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

特别是 fiddle 有这段代码:

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

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

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