Question

我正在与Meteor JS（版本1.2）合作，使用accounts-password package进行用户注册/登录。

我正在使用 - 或者至少尝试使用 - Zurb Foundation 5（版本5.3）用于我的项目。我测试了ewall:foundation package和juliancwirko:zf5 package，两者都运行良好。

对于帐户，我添加了useraccounts:foundation package。

在页面上使用{{> atForm}} tamplate也很有效。 SignIn / SignUp表单正确显示。

但是在固定的顶级NavBar中使用它不起作用。它显示不正确。（参见下面的图片和来源。）

我在控制台中没有收到任何错误的错误。

我假设useraccounts：foundation包在导航栏中显示一个按钮/链接，然后用登录表单显示一个模态/弹出窗口。

我的问题：是否有任何软件包损坏或我是否以任何方式使用它们？

或者我的假设是，useraccounts：基础包应该在带有模态的导航栏中显示登录表单，只是错误？如果是这样，我需要做什么才能在我的应用中获得所需的行为？

该应用程序正确显示页面中的登录表单，但在导航栏中显示错误。

在移动视图中......

...它也显示不正确。

我做了一个简单的projekt没有任何路由器等来测试上面的包，这里是来源：

项目/客户端/ main.html中

<head>
    <title>ZF5 Demo</title>
</head>

<body>
    {{> header}}

    {{> content}}
</body>

项目/客户端/ header.html中

<template name="header">
    <nav class="top-bar" data-topbar="">
        <ul class="title-area">

            <li class="name">
                <h1><a href="#">ZF5 Demo</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>

        <section style="left: 0%;" class="top-bar-section">
            <ul class="right">
                <li><a href="#">Home</a></li>
                <li>{{> atForm}}</li>
            </ul>
        </section>
    </nav>
</template>

项目/客户端/ header.js

Template.header.rendered = function () {
    $(document).foundation('reflow');
}

项目/客户端/ content.js

<template name="content">
    <section class="row">
        <div class="large-12 columns">
            <div class="panel">
                <h1>Content</h1>

                {{> atForm}}
            </div>
        </div>
    </section>
</template>

呈现的HTML看起来像那样（只有导航栏部分）。

<body>
<nav data-topbar="" class="top-bar">
        <ul class="title-area">

            <li class="name">
                <h1><a href="#">ZF5 Demo</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>
    <section class="top-bar-section" style="left: 0%;">
            <ul class="right">
                <li><a href="#">Home</a></li>
                <li>
    <div class="at-form">

        <div class="at-title">
    <h3>Sign In</h3>
  </div>
        <div class="at-pwd-form">
    <form method="POST" action="#" novalidate="" id="at-pwd-form" role="form">
    <div class="at-input row">
    <div class="large-12 columns">

        <label for="at-field-email">
          Email 
        </label>

      <input aria-label="Email " placeholder="Email" name="at-field-email" id="at-field-email" type="email">

    </div>
  </div>    
    <div class="at-input row">
    <div class="large-12 columns">

        <label for="at-field-password">
          Password 
        </label>

      <input aria-label="Password " placeholder="Password" name="at-field-password" id="at-field-password" type="password">

    </div>
  </div>    
      <button id="at-btn" class="at-btn button" type="submit">
    Sign In
  </button>
    </form>
  </div>
        <div class="at-signup-link">
    <p>
      Don't have an account?
      <a class="at-link at-signup" id="at-signUp" href="#">Register</a>

    </p>
  </div>
    </div>
  </li>
            </ul>
        </section></nav>
[...content...]</body>

修改

我试图包裹{{＆gt; atForm}}模板到 project / client / header.html ：

的下拉列表中

<template name="header">
    <nav class="top-bar" data-topbar="">
        <ul class="title-area">

            <li class="name">
                <h1><a href="#">ZF5 Demo</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>

        <section style="left: 0%;" class="top-bar-section">
            <ul class="right">
                <li><a href="#">Home</a></li>

                <li>
                    <a data-dropdown="signin-dropdown" aria-controls="signin-dropdown" aria-expanded="false">Sign In</a>
                    <div id="signin-dropdown" data-dropdown-content class="f-dropdown content" aria-hidden="true">
                        <div>
                            {{> atForm}}
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </nav>
</template>

结果如下：

现在菜单按钮看起来更好，......

...但LogIn表单呈现错误。

我还尝试了其他一些事情，没有任何结果。

我认为这只是我使用基础的方式的问题，因为我是该框架的新手并且不了解每个细节。

所以我会坚持使用SignIn模态表格，如example所示。

使用zurb foundation 5和meteor

0 个答案: