Ratchet CSS 和 Marionette 区域答案

【问题标题】：Ratchet CSS and Marionette RegionsRatchet CSS 和 Marionette 区域
【发布时间】：2014-04-21 15:04:11
【问题描述】：

你好 MarionetteJS 大师，

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

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

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

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

地区

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>

【问题讨论】：

标签： css marionette

【解决方案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

【讨论】：