When to use sub views with Emberjs

Question

Hi guys I plan on having a layout that looks like this:

This is my first Ember app and I'm mainly curious when I should take advantage of th sub views with {{outlet}}

My question is, should I make the navbar and the entire chat view on one page

Or should I make the navbar and then have a sub view {{outlet}} which will be the chat window.

When I click different chat links I don't want the page to refresh I just want the chat window to reload with the chat from the active chat.

This will be my first Ember project and I'm just wondering which way I should lay it out, I read through the Guide which was very helpful but like I said I don't know if I should make the Navbar/Chat on one template or if I should make the navbar and then outlet the chat screen. Any information would be great thanks

TameBadger TameBadger · Accepted Answer · 2016-05-09T07:09:15

As it's your first Ember app, it's sortoff like cheating to get us to help you with this. ;P But nevertheless, I think a small demo and some pointers won't hurt.

So think about your app like this, will people want to share chatrooms via a link or just bookmark them and easily fall back in ? If you answer yes, then you should create a route the corresponds to your use case, in this case, you're app will need a router that looks something like this:

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

your corresponding route templates

// 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'}}

You can have a look at a working example here.

And as your app gets more complex, you can start to componentize some pieces of it, for instance, you could create a component for typing new messages, and a navbar component that contains your user's authentication state. You'll also likely need services that contain this state, which you can then inject into the components.

When to use sub views with Emberjs

1 Answers