css - 棘轮 CSS 和 Marionette 区域

Question

你好 MarionetteJS 大师，

我遇到了一个可能非常简单的问题，但我不知道如何解决它。我有一个包含 2 个区域和 1 个布局的应用程序，我正在使用 Ratchet CSS 库进行原型(prototype)设计。在功能上，目标很简单:在一个 View 中显示联系人列表，带有标题和搜索栏。如果用户选择一个联系人，删除搜索栏并只保留标题。

问题似乎是交换 View 进出所需的包装 div。 Ratchet CSS 需要标题栏直接位于内容部分的上方，以便将它们正确停靠在视口(viewport)的顶部，但 Marionette 的区域和布局(至少在我的配置中)阻止了这种情况的发生。或许我可以更好地构建我的观点？

结果输出的 JSFiddle:http://jsfiddle.net/VB7py/3/您会注意到标题/搜索区域与内容区域重叠。

menuRegion 包含页脚菜单，mainRegion 包含由标题区域、搜索区域和“主要内容”区域组成的布局。以下是我的一些代码片段:

地区

var App = new Marionette.Application();

App.addRegions({
headerRegion: "#header-region",
menuRegion: "#menu-region",
mainRegion: {
    selector: "#main-region",
    regionType: MainRegion
  }
});

布局/ View

List.Layout = Marionette.Layout.extend({
    template: "#contacts-layout",

    regions: {
        headerRegion: "#header-region",
        searchRegion: "#secondary-header-region",
        contactsRegion: "#contacts-region"
    }
});

List.Search = Marionette.ItemView.extend({
    tagName: "div",
    template: "#contact-list-search",
    className: "bar bar-standard bar-header-secondary"
});

List.Header = Marionette.ItemView.extend({
    template: "#contact-list-header"
});

模板

<!-- Application Layout -->
<script type="text/template" id="contacts-layout">
    <div id="header-region" class="bar bar-standard"></div>
    <div id="secondary-header-region">

    </div>  
    <div id="contacts-region" class="content"></div>
</script>

<script type="text/template" id="contact-list-header">
    <nav class="bar bar-standard"><h1 class="title">Contacts</h1></na>
</script>

<script type="text/template" id="contact-list-search">
    <input type="search" placeholder="Search" />
</script>

<script type="text/template" id="menu-template">
    <nav class="bar bar-tab bar-footer">

    </nav>
</script>

Answer 1

区域内的包装 div 似乎不是问题。但是，您需要将那些特定于栏的 css 类设置为区域而不是它的嵌套元素。喜欢:

    <div id="header-region" class="bar bar-standard">
        <div>
            <nav>
                 <h1 class="title">All Contacts</h1>

            </nav>
        </div>
    </div>
    <div id="secondary-header-region" class="bar bar-header-secondary">
        <div>
            <input type="search" placeholder="Search">
        </div>
    </div>

参见:http://jsfiddle.net/Cardiff/7Wd6W/

您可以在区域元素上预先设置这些类或在区域初始化时添加这些特定类，请参阅:https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#instantiate-your-own-region