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

我有一个工作解决方案，在我正在研究的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文档中似乎没有提到使用.html（）来获取页面上的内容 – 我想知道这是否被遗漏，因为它不需要或者假设它。

有人可以帮忙吗？

Answer 1

好的，所以看起来这可以通过在应用程序中创建“区域”来规避，然后使用.show（）来显示其中的布局。

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

以及另一个问题： 了解Marionette中Backbone.js的布局

小提琴特别有这个代码：

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

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

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