2

私のアプリは、ホームページとダッシュボードの 2 つのページで構成されています。ホームページで、ログイン (上部のナビゲーション) と登録 (本体) を表示したいと考えています。ユーザーがログインしている場合は、ダッシュボードを表示します。ダッシュボードにログアウトオプションを表示したい。ログアウト時にホームページを表示します。

問題:ダッシュボード テンプレートを更新しようとすると、すべてのコンテンツがナビゲーション バーに直接移動してしまいます。同様に紛らわしいのは、ホームページ ページの本文コンテンツがまだダッシュボード ページにレンダリングされていることです。私は明らかに何かを見落としていますが、それが私のコードのエラーなのか、テンプレートとルートの理解のエラーなのかわかりません。

使用中: Iron-Router、Accounts-UI および Accounts-password、Twbs:bootstrap。

以下に挿入されているのは、マスター、ホームページ、およびダッシュボードの 3 つの主要なテンプレートです。

あなたが提供できる助けを前もって感謝します!

ロジックにログインした場合のマスター テンプレート

<template name="MasterLayout">
    {{> yield}}
    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">THE BRAND</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        {{#if currentUser}}
          {{> Dashboard}}
        {{else}}
          {{> Login}}
        {{/if}}
      </div><!--/.navbar-collapse -->
    </div>
  </nav>
</template>

ホームページにはメインコンテンツが含まれています

<template name="Homepage">
  <div class="jumbotron">
    <div class="container">
      <h1>Get it now..</h1>
      <p>Donec id elit</p>
      {{#if currentUser}}
        hello
      {{else}}
        {{> Register}}
      {{/if}}
    </div>
  </div>
</template>

ダッシュボードはプレースホルダー テキストを保持します

<template name="Dashboard">
  <ul class="nav navbar-nav">
    <li class="navbar-text">Navigation Placeholder</li>
    <li><a href="#" class="logout">Logout</a></li>
  </ul>
</template>

次のコントローラーを作成しました。

ホームページ

HomepageController = RouteController.extend({
  layoutTemplate: 'MasterLayout',

  subscriptions: function() {
  },

  action: function() {
    this.render('Homepage');
  }
});

ダッシュボード

DashboardController = RouteController.extend({
  layoutTemplate: 'Dashboard',

  subscriptions: function () {
  },

  data: function () {
  },

  action: function () {
    this.render('Dashboard', { /* data: {} */});
  }
});
4

2 に答える 2