Question

Hello MarionetteJS Gurus，

我有可能是一个非常简单的问题，但我无法解决如何解决问题。我有一个带有2个区域和1个布局的应用程序，我使用Ratchet CSS库进行原型设计。从功能上讲，目标很简单：在一个视图中显示联系人列表，带有标题和搜索栏。如果用户选择了联系人，请删除搜索栏并仅保留标题。

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

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

menuRegion 包含一个页脚菜单， mainRegion 包含一个由标题区域，搜索区域和主要内容组成的布局＆＃34;区域。以下是我的代码的一些片段：

地区

var App = new Marionette.Application();

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

布局/浏览次数

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

棘轮CSS和木偶区域

1 个答案: