Emberjs

Question

と私はこのようになりますレイアウトを有することを計画

こんにちはみんなサブビューを使用するとき：

https://wireframe.cc/uk2C4L

をこれが私の最初のエンバーアプリですと、私はを活用する必要があるとき、私は主に好奇心が強いです{{outlet}}

私の質問は、私がナビゲーションバーと1ページの全体チャットビュー

を行う必要がありますされてまたは私はナビゲーションバーを作成して、トンとなり、サブビュー{{outlet}}を持つべきであるとの番目のサブビュー彼はチャットウィンドウ。

私が別のチャットリンクをクリックしたとき、私はページを更新したくありません。チャットウィンドウをアクティブチャットからチャットし直したいだけです。

これは私の最初のEmberプロジェクトになります。どのようにレイアウトするべきかと思っています。私はGuideを読んでいましたが、非常に参考になりましたが、Navbar/1つのテンプレートでチャットするか、またはナビバーを作成してチャット画面を終了する必要があるかどうかを確認します。どんな情報でも大変感謝します

Answer 1

初めてのEmberアプリだから、これを手伝ってくれるような不正行為のようなものです。 ; Pしかしそれにもかかわらず、私は小さなデモといくつかの指針が傷つくことはないと思います。

あなたのアプリをこのように考えてみましょう。人々はリンクを介してチャットルームを共有したいのですか、単にブックマークしてブックマークし直すだけですか？

// router.js 
Router.map(function() { 
    this.route('friends') 
    this.route('users') 
    this.route('chatrooms',function(){ 
    this.route('room',{path:'/:id'}) 
    }) 
}); 

ご対応するルートテンプレート

：あなたはyesと答える場合は、ご利用の場合に対応するが、この場合には、あなたはアプリは次のようになり、ルータが必要になりますしているルートを作成する必要があります

// templates/chatrooms.hbs 
<div class='flex-container'> 
    <div class='flex-sidebar'> 
    <ul> 
    {{#each model as |chatroom|}} 
     <li> 
     {{#link-to 'chatrooms.room' chatroom}} 
      {{chatroom.name}} 
     {{/link-to}} 
     </li> 
    {{/each}} 
    </ul> 
    </div> 
    <div class='flex-content'> 
    {{outlet}} 
    </div> 
</div> 

// templates/chatrooms/room.hbs 
<h3>Headline:{{model.name}}</h3> 
<hr/> 
<ul> 
    {{#each model.posts as |post|}} 
     <li>{{post.user.name}}:{{post.title}}</li> 
    {{/each}} 
</ul> 
<hr/> 
{{input value=newMessage placeholder='Type new message here'}} 

実例hereを見ることができます。

アプリが複雑になると、新しいメッセージを入力するためのコンポーネントを作成したり、ユーザーの認証状態を含むnavbarコンポーネントを作成したりするなど、いくつかのコンポーネントをコンポーネント化することができます。また、この状態を含むサービスが必要になります。このサービスをコンポーネントに注入できます。