Chatroom App Demo

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

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

export default Router;

routes.chatrooms.js

import Ember from 'ember';

import { chatrooms } from './data'

export default Ember.Route.extend({
  model(){
   	return chatrooms
  }
});

routes.data.js

export const users = Ember.A([
  {id: 1, name: 'User 1'},
  {id: 2, name: 'User 2'},
  {id: 3, name: 'User 3'},
  {id: 4, name: 'User 4'}
])

export const chatrooms = Ember.A([
  {id: 1, name:'Chatroom 1', messages: [
    {title:'Hey there!',user:users[0]},
    {title:'Hello User 1',user:users[1]},
    {title:'Hi Guys',user:users[2]},
    {title:'HMmm everyone is just saying hello',user:users[3]},
  ]},
  {id: 2, name:'Chatroom 2'},
  {id: 3, name:'Chatroom 3'},
  {id: 4, name:'Chatroom 4'}
])

routes.index.js

import Ember from 'ember'

import { chatrooms } from './data'

export default Ember.Route.extend({
  model(){
   	return chatrooms
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  min-height: 100vh;
}

.flex-container{
  display: flex;
  min-height: 100vh;
}
.flex-sidebar{
  background: gray;
  flex: 1;
}
.flex-content{
  flex: 2;
}

templates.application.hbs

{{outlet}}

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.messages as |message|}}
		<li>{{message.user.name}}:{{message.title}}</li>
  {{/each}}
</ul>

<hr/>
{{input value=newMessage placeholder='Type new message here'}}

templates.index.hbs

Chatrooms Available:{{model.length}}<br/>
<ul>
{{#each model as |chatroom|}}
	<li>
    {{#link-to 'chatrooms.room' chatroom}}
      {{chatroom.name}}
    {{/link-to}}
  </li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.8.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}