2

私は ember.js を学習しようとしていますが、それらすべてを接続するのに苦労しています。ember.js で提供されているチュートリアルを読みましたが、まだ少し混乱しています。

モデルには、サーバーに保存されるデータが含まれています。コントローラーはモデルのデータにアクセスし、それを装飾 (表示データを追加) してテンプレート自体に送信できます。

例では、モデルから実際にデータを取得するためにルート クラスを使用しています。ルートをモデルに関連付けて .find() を呼び出すだけで、find() はモデルからデータのリストを返します。

私の例では、1 つのルートのみを使用しています。

私の質問は：

  1. コントローラーからモデルからデータを取得する方法
  2. コントローラーは複数のモデルからデータを取得できますか? もしそうなら、これはどのように行われますか？
  3. コントローラーに複数の関数が関連付けられている場合、テンプレート内で適切な関数をトリガーするにはどうすればよいですか。

どんな例でも役に立ちます...私は周りを検索してきましたが、ほとんどの場合、1 つのモデルにリンクされた 1 つのコントローラーがあり、コントローラーが 1 つのテンプレートにリンクされているという単純なケースを扱っています。テンプレートが複数のコントローラーを使用したい場合はどうなりますか?

複数のコントローラーへのテンプレートのマイクの例を参照してください。

  //index.html

  <script type="text/x-handlebars" id="index">
     <div {{action getMessage}} > </div>
     <div {{action getTest}} > </div>

     {{#each App.menuController}}
          {{title}}
     {{/each}}
  </script>

  // app.js

  App.ChatController = Ember.Controller.extend({
     getMessage: function() { alert("getMessage Called"); }
  });

  App.MenuOption = Ember.Object.extend({
    title: null,
    idName: null
  });

  App.MenuController = Ember.ArrayController.create({
  content:[],
  init : function() 
  {
        // create an instance of the Song model
        for(var i=0; i<menuOptions.length; i++) {
            console.debug(menuOptions[i]);
            this.pushObject(menuOptions[i]);
        }

  },
  getTest: function() { alert("getTest Called"); }
});

//router.js
App.Router.map(function () {
  this.resource('index', { path: '/' });
});

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return ['a','b', 'c' ];
  },
  setupController: function(controller, model) {
        controller.set('content', model);
  },

});

App.IndexController = Ember.Controller.extend({
  needs: "index"
});

上記からわかるように、1 つのルート「インデックス」があります。デフォルトのインデックス テンプレート内で、複数のコントローラーのアクションを呼び出す方法を見つけようとしています。この場合、App.ChatController に属する「getMessage」と App.MenuController に属する「getTest」を呼び出したいと思います。現在、「getTest」はテンプレートのコントローラー「index」に対して定義されておらず、IndexRoute でも定義されていません。「ニーズ」を使用して MenuController を IndexController にリンクし、コントローラの getTest メソッドを呼び出せるようにしますか。

更新しました - - - - - - - - - - - - - - - - -

私は最終的にレンダリングルートに行きました

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return ['a','b', 'c' ];
  },
  renderTemplate: function () {
        this.render();
        this.render('menu', { outlet: 'menu', into: 'application', controller: App.menuController });
        this.render('userList', { outlet: 'userList', into: 'application', controller: App.UserListController });
  }
});

これにより、特定のレンダリングごとに特定のコントローラーを指定することができました。

アドバイスをいただければ幸いです、ありがとう、D

4

1 に答える 1

4

コントローラーからモデルからデータを取得する方法

デフォルトでは、ルートのモデル (ルートのmodelフックによって返されるオブジェクト) がコントローラーに注入され、コントローラーのcontentプロパティ (エイリアスとしてもmodel) を介してアクセスできます。

コントローラーは複数のモデルからデータを取得できますか? もしそうなら、これはどのように行われますか？

はい、可能です。setupController追加のモデルは、ルートのフックからコントローラーに設定できます。つまり、ほとんどの場合、複数のコントローラーを使用したいと思うでしょう。

コントローラーに複数の関数が関連付けられている場合、テンプレート内で適切な関数をトリガーするにはどうすればよいですか。

コントローラー機能は、ハンドルバー{{action}}ヘルパーを介してトリガーされます。そのヘルパーの最初のパラメーターは、トリガーする関数の名前です。したがって{{action "save"}}、コントローラーのsave機能を{{action "cancel"}}トリガーし、cancel機能をトリガーします。

どんな例でも役に立ちます...私は周りを検索してきましたが、ほとんどの場合、1 つのモデルにリンクされた 1 つのコントローラーがあり、コントローラーが 1 つのテンプレートにリンクされているという単純なケースを扱っています。

そのような例を見つけるのが難しい理由は、それがベスト プラクティスではないからです。確かに、1 つのコントローラーを複数のモデルにリンクしたり、複数のコントローラーを使用するテンプレートを作成したりすることは可能ですが、それは良い考えではありません。

テンプレートが複数のコントローラーを使用したい場合はどうなりますか?

技術的には、これはグローバル変数を使用して実行できますが、使用しないでください。コントローラーは非常に軽量です。各テンプレートは独自のコントローラーを取得します。テンプレートが他のコントローラーからのデータを必要とする場合、そのコントローラーはそのデータを利用できるようにする必要があります。これは、プロパティを介して行うことができneedsます。コントローラー間の依存関係の管理を参照してください

  {{each message in messages}}
    {{message.username}}: {{message.text}}
  {{/message}}
  {{input valueBinding="text"}}
  <button {{action send}}>Send</button>

  App.ChatController = Ember.Controller.extend({
    needs: ['messages', 'currentUser'],
    messagesBinding: 'controllers.messages'
    send: function() {
      var message = App.Message.createRecord({
        username: this.get('username'),
        text: this.get('text')
      });
      message.save();
      this.set('text', '');
    }
  })
于 2013-08-29T00:21:06.983 に答える