1

Rails/Ember pre-4 を使用して、ナビゲーション バーとコンテンツ セクションを含むページを作成するという、かなり典型的なことをしようとしています。ナビゲーションバーはログイン時にのみ変更されます (ログイン時にログアウト ボタンが表示され、ログアウト時にログイン ボタンと登録ボタンが表示されます)、ページが変更されるたびに変更されるわけではありません。

最初は、次のような application.hbs テンプレートで何かできると思っていました。

{{ナビゲーションバーを表示}} {{アウトレット}}

ここで、ログイン状態の変更に応答するようにナビゲーション バーを設定します (状態マネージャーによって管理されます)。これはうまくいかなかったようです。

次に、次のようなことを試しました（application.hbsでも）：

{{アウトレットナビゲーションバー}} {{アウトレット}}

各ルートにナビゲーションバーを設定しようとしましたが、多くの重複が発生し、最終的には機能しませんでした.

コードを投稿する前に、ナビゲーションバーやサイドバーなどのページの特定の部分が、ページが変更されるたびにではなく、アプリの状態が変化したときにのみ変更されるという一般的な状況に対する適切な解決策を誰かが既に持っているかどうかを知りたいと思っていました.

4

1 に答える 1

2

これを行うには多くの方法があります。あなたが説明した最初のアプローチは、私たちがやっていることに最も近いものです。過去の ember バージョンではこれにビュー ヘルパーを使用していましたが、現在はビュー ヘルパーを使用しています{{render}}が、基本的な概念は同じです。たとえば、application.hbs は次のようになります。

{{render navbar}} {{outlet}}

これで、navbar.hbs は単純な{{#if}}ヘルパーを使用して、ログイン状態に基づいてリンクを交換できるようになりました。

<div class="navbar">
  <div class="navbar-inner">
    {{#linkTo index class="brand"}}My App{{/linkTo}}
    <ul class="nav">
      <li>{{#linkTo index}}Home{{/linkTo}}</li>
      <li>{{#linkTo about}}About{{/linkTo}}</a></li>
    </ul>
    <ul class="nav pull-right">
     {{#if isAuthenticated}}
     <li><a {{action logout}} href="#">Logout</a></li>
     {{else}}
     <li><a {{action login}} href="#">Login</a></li>
     {{/if}}
    </ul>
  </div>
</div>

ここで、ログイン状態を追跡および管理するロジックを NavbarController に追加します。

App.NavbarController = Ember.ArrayController.extend({
  isAuthenticated: false,
  login: function() {
    this.set('isAuthenticated', true);
  },
  logout: function() {
    this.set('isAuthenticated', false);
  }
});

実際のアプリでは、NavbarController がこれらのリクエストを別のコントローラー (おそらくcurrentUserController. ここで実際のサンプルを作成しました: http://jsbin.com/iyijaf/6/edit

于 2013-02-06T04:43:12.330 に答える