jquery - View 中的粘性页脚而不是 shell.html

Question

我有一个 knockout 和 durandal 应用程序，其页脚不会粘住。
我相信这是因为 shell.html 中未指定页脚

shell.htm
<div id="wrap" class="col-md-10 col-md-offset-1 col-xs-12">

  <nav class="navbar navbar-inverse navbar-static top" role="navigation"></nav>

  <div class="page-host" data-bind="router: { transition: 'entrance', cacheViews: true }">

</div>

但在组成其他 View 的 View 中指定。

wizard.html

<div class="container-fluid">
    <div data-bind="compose:{model:currentWizardView,activationData:$root,transition: 'entrance'}"></div>
</div>    
<div id="push"></div>
<div id="footer">
<div class="footer-bar">
    <button id="previous" class="btn btn-lg btn-next" data-bind="click:previous,enable:canMovePrevious">< Previous</button>
    <button id="next" class="btn btn-lg btn-next" data-bind="click:next,visible:canMoveNext">Next ></button>

</div>

shell.html 组成 Wizard.html 文件。

所以基本上...

Shell.html 换行

1. 导航栏
2. 撰写向导

Wizard.html 换行

1. 撰写向导 View
2. 页脚

我已经在网上搜索了好几天，并尝试了多个 css 粘性页脚(即 navbar-fixed-bottom、位置:固定、vh - 视口(viewport)高度)，但没有给我所需的外观。

无论组合 View 的高度如何，我都需要将页脚放在页面底部。

有什么想法吗？

html...去掉了多余的内容。

<div id="applicationHost" class="container-fluid">
    <div id="wrap" class="col-md-10 col-md-offset-1 col-xs-12" data-view="views/shell" data-active-view="true" style="">

        <nav class="navbar navbar-inverse navbar-static top" role="navigation">
        </nav>
        <div class="page-host" data-bind="router: { transition: 'entrance', cacheViews: true }">
            <div class="container-fluid" data-view="views/wizard" data-active-view="true" style="">
                <div data-bind="compose:{model:currentWizardView,activationData:$root,transition: 'entrance'}">
                    <div class="durandal-wrapper" data-view="views/texture" data-active-view="true" style="">
                        <div data-bind="compose:'templates/_value.html'">
                            <div class="durandal-wrapper" data-view="views/templates/_value" data-active-view="true">
                                <ul class="list-group" data-bind="foreach: values">
                                    <li class="list-group-item active" data-bind="click:$parent.setValue.bind($parent,$index()),css:{active: $parent.value() == $index()}">
                                        <label data-bind="text: $data"></label>
                                    </li>
                                </ul>
                            </div>
                        </div><div class="clearfix"></div>
                    </div>
                </div>
                <div id="push"></div>
                <div id="footer">
                    <div class="footer-bar">
                        <button id="previous" class="btn btn-lg btn-next" data-bind="click:previous,enable:canMovePrevious">&lt; Previous</button>
                        <button id="next" class="btn btn-lg btn-next" data-bind="click:next,visible:canMoveNext">Next &gt;</button>
                    </div>
                </div>
            </div>
            <div class="durandal-wrapper" data-view="views/serviceTypes" style="display: none;">
                <div class="row">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

与其说这是生命周期中哪个位置的问题，不如说是页面结构的问题。

Durandal 在其组成方式上是完全正交的:shell 是一个 View / View 模型对，就像其他所有东西一样。路由器操纵 shell，将 View 组合到其中并管理它们的可见性。看到这一点的最佳方法可能是获取一个可用的 Durandal 应用程序并在浏览器上按 F12，然后观察当用户操作导致 View 加载时 DOM 会发生什么情况。

每个 shell View 都包含一些变化:

<div class="container page-host" data-bind="router: { cacheViews:true }"></div>

注意与路由器的 knockout 绑定(bind)。这就是将 View 编码到 DOM 中的方法。因此，您的任何 View 中的所有内容都是此 div 的间接子级，而这正是您尝试定位页脚的原因。

您可以通过重新设置页脚 div 的父级来解决布局问题，但这会给您带来一个新问题:页脚 div 的可见性将不再依赖于它逻辑上所属的 View 。

要将 View 的粘性页脚重新置于自动路由器控制之下，您需要管理其起源。您可以使用 View 模型的激活和停用事件中的代码来执行此操作，但更优雅的解决方案是将其parentElement 数据绑定(bind)到 View 模型的属性。

我想粘性页脚 div 需要是 $(document.body)

的直接子级