Question

我有一个工作解决方案，在我正在研究的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（）来获取页面上的东西没有提及 - 如果这还是离开了，因为它是没有必要的，它的假设我想知道

有人可以帮忙吗？

Answer 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。

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

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

1 个答案: