I'm pretty new to meteor so this may or may not be the correct behavior although I'm not sure how to 'fix' the example to do what I wish.
I'm creating a chatroom app, to learn Meteor, and when I add messages to the 'chatroom' the messages all send find but don't sort to the correct order until after I refresh the page. The messages are all stored with a timestamps which holds the value Date.parse();
router.js
Router.configure({
layoutTemplate: 'layout',
notFoundTemplate: 'notFound',
loadingTemplate: 'loading'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'home'
});
this.route('room', {
path: '/room',
template: 'room',
waitOn:function(){
return [Meteor.subscribe('rooms'),
Meteor.subscribe('messages')];
},
data: function() {
//console.log(Rooms.find().fetch())
return {roomUsers: Rooms.find(),
userMessages: Messages.find({},{sort: {timestamp: 'desc'}})};
},
action: function(){
if(this.ready()){
this.render();
console.log(Rooms.find({userId:Meteor.userId()}).count());
if(Rooms.find({userId:Meteor.userId()}).count() < 1){
console.log("This happens");
Rooms.insert({username: Meteor.user().emails[0].address,roomId: 1,userId:Meteor.userId()});
}
}
}
});
});
room.html
<template name="room">
<div class="col-xs-10 chatMain">
<div class="row">
<div class="col-xs-12 chatContainer">
{{#each userMessages}}
<div class="message">
<div class="uname">
{{username}}
</div>
<div class="text">
{{message}}
</div>
</div>
{{/each}}
</div>
<div class="col-xs-12 colRem">
<div class="chatbox">
<form>
<textarea type="text" id="message"></textarea>
<button>Send!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-xs-2 chatUsers">
<ul>
{{#each roomUsers}}
<li>{{username}}</li>
{{/each}}
</ul>
</div>
</template>
This image is before the refresh.
This is what I want to happen automatically each time a message is sent.
