emberモデル - アイテムのテーブルを作成する詳細をご覧になるには

Question

私はemberjsを学んでいて、ベアボーンタスクを与えられています。

私のモデルから表示されたユーザーのテーブルがあります。テーブルの横には、選択したユーザーの詳細が表示される領域があります。したがって：

ID FNAME LNAME   | DETAIL: User 2 
1 Andy Ashford  | First: Betty 
2 Betty Beckett  | Last: Beckett 
         | Phone: 222-222-2222 

私はLEFT側が正しく動作していますが、RIGHT側は動作していません。

（私はデータをロードするためにミラージュを使用しています。私は仕事にのhttp-モックを取得するように見えることができませんでした）。

つの質問：

1. が、私はこの直接スクリプト内または

2. 私はパスを使用する必要があります
   • ルートべきでしょうか？つまり、usersテーブルだけが表示されているときは、私のパスは/ users /ですが、ユーザ1をクリックするとパスが/ user/1に設定され、その後すべてのロジックが実行されます。

3. どちらの方法でも、特定のユーザーデータをユーザーディテールコンポーネントにどのように配信するのですか？モデルをビューにどのように向けるのですか？ここで

は私ミラージュ/ config.jsの（ミラージュは、設定ファイル内のデータを保持する理由を知っているが、...しないでください）

this.get('/users', function() { 
    return { 
     data: [{ 
      type: 'users', 
      id: 1, 
      attributes: { 
       fname: 'Andy', 
       lname: 'Ashford', 
       phone: '111-111-1111', 
      } 
     }, { 
      type: 'users', 
      id: 2, 
      attributes: { 
       fname: 'Betty', 
       lname: 'Beckett', 
       phone: '222-222-2222', 
      } 
     }] 
    }; 
}); 

マイモデル/ user.jsのです（これが機能している

import Model from 'ember-data/model'; 
import attr from 'ember-data/attr'; 

export default Model.extend({ 
    fname: attr(), 
    lname: attr(), 
    phone: attr() 
}); 

私の主なテンプレート/コンポーネント/ユーザーlist.hbs：はちょうどこのようになります。

<table class="with-detail"><tr> 
     <td class="table-overview"> 
      <table class="user-table"> 
       {{#each users as |user|}} 
       <tr> 
        <td>{{user.id}} </td> 
        <td>{{user.fname}}</td> 
        <td>{{user.lname}}</td> 
       </tr> 
       {{/each}} 
      </table> 
     </td> 
     <td class="table-detail"> 
      <!-- Show all data of user X --> 
      <!--{{user-detail}}--> 

     </td> 
    </tr> 
</table> 

マイテンプレート/コンポーネント/ユーザーdetail.hbs（私は詳細のラベルを見ることができるので、私はテンプレートを呼んでいる： - 右側の詳細は）データを持たないにもかかわらず、左側のテーブルしかし、データなし）：

First name: {{user.fname}} //these don't work of course 
Last name: {{user.lname}} 
Phone: {{user.phone}} 

これは私がrouter.jsでやろうとしていたものです：

Router.map(function() { 
    this.route('users', { 
     path: 'users', 
    }); 
    this.route('user', { 
     path: 'user/:id' 
    }); 
}); 

とのために良い措置、さらにいくつかのルートがあります。 ルート/ users.js：

import Ember from 'ember'; 
export default Ember.Route.extend({ 
    model() { 
     return this.store.findAll('user'); 
    } 
}); 

ルート/ user.jsの：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
     return this.store.query('user', { id: 1 });  
    } 
}); 

（と、なぜこれほど多くのルートファイル？）

私がuser/1に直接ぶつかったら、何も見ません。テーブルもディテールもありません。おそらく/ usersとそのモデルがなくなったからでしょう。

私は一種の困惑です。

Answer 1

あなたの質問は少し一般的ですから、私はこのSOの別の質問に対してこの解決策を作成しましたが、私はあなたが望んでいると信じているものの良いデモンストレーションとして役立ちます。

このtwiddleをご覧になり、これが念頭に置いたものかどうかをお知らせください。

このアプリのために、対応するルーティング構造は

Router.map(function() { 
    this.route('games', function(){ 
    this.route('game', { path: '/game/:language_id' }, function(){ 
     this.route('comments') 
    })   
    }) 

だからあなたは左側にロードされたコメントが1、右のそれの詳細を、クリック上のゲームのリストが表示されますです。