0

個人的なプロジェクトで ember js を試しています。Ember のさまざまなコンポーネントの役割を理解するのに苦労しています。

私は Rails に精通しており、バックボーンをある程度使用したことがあり (ルーティングに関連するすべてを使用したことはありません)、それら 2 つがどのように機能するか、どのようなオブジェクトが MVC のどの部分を担っているかを理解しています。

Ember の場合、物事はそれほど明確ではなく、少し簡単ではないように思えます。ガイドといくつかの投稿を読みましたが、まだうまくいきません。モデル パーツを取得します。これは、対応するレールとバックボーンにかなり似ています。テンプレート、ハンドルバーなども入手します。ルーターは Rails ルーターに似ています。

次に、コントローラー、ルート、およびビューがあります。私が理解したことから、Views は UI の一部を表し、ユーザー インタラクションを処理します。私があまり得られないのは、コントローラー/ルートの役割です。

より具体的には、アプリにナビゲーションバー（ページセクションへのリンクを含む）と「ユーザー接続ウィジェット」を持たせ、接続している場合はユーザーデータを表示し、接続していない場合は接続できるようにし、Facebookなどでログインできるようにしたい.

ナビゲーションバーはビューに適しているようですが、コントローラーの役割のように見える状態をどこかに保持する必要があります (現在のページを強調表示するため)。ユーザーウィジェットはコントローラーに適しているようですが、ルートごとにコントローラーが1つしかないので、これを行う方法は?

お時間をありがとうございました。

:)

4

1 に答える 1

1

コントローラーは、アプリケーションの状態を保存します。ルーターは、アプリケーションのさまざまな状態を管理します。その通りです。ルートごとにコントローラーは 1 つしかありませんが、他のコントローラーにもアクセスできます。

これをあなたのhtmlと仮定します：

<script type="text/x-handlebars" data-template-name="application">
  <div class="main-content">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
  <div class="nav-bar">
    <div class="user">
      {{#if isLoggedIn}}
        <div class="user-name">{{userName}}</div>
        {{else}}
        <button {{action "login" target="App.UserController"}}>
            Login
        </button>
        {{/if}}
    </div>
  </div>
  <div class="content">some other amazing content here</div>
</script>

およびJS：

var App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  rootElement: '#ember-app'
});

App.Router.map(function () {
  this.route('user');
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controller.set('isLoggedIn', this.controllerFor('user').get('isLoggedIn'));
  }
});

App.UserController = Ember.ObjectController.extend({
  isLoggedIn: false,
  userName: 'emberjs',
  login: function () {
     this.set('isLoggedIn', true);
  }
});

App.NavbarView = Ember.View.create({
  loggedInBinding: Ember.Binding.oneWay('App.UserController.isLoggedIn')
});

ルートから別のコントローラーにアクセスする必要がある場合は、次のようにします。

App.IndexRoute = Ember.Route.extend(function () {
  setupController: function () {
    var userController = this.controllerFor('user');
    console.log('this is a user controller instance', userController);
  }
});
于 2013-02-16T19:56:13.950 に答える