MeteorJS template not displaying data not showing
I originally thought my collection was not receiving data, but it turns out I just had a typo in my query. But my data still doesn't appear on the screen. The HTML template is pretty simple, here it is:
<template name="messages" class=".messages">
{{#each showMessages}}
<blockquote>
<p>{{message}}</p>
</blockquote>
{{/each}}
</template>
It is supposed to just create a collection of messages when I call {{> messages}} Here's where the JS client side corresponds:
Meteor.subscribe("Messages");
Template.messages.helpers({
showMessages: function(){
return Meteor.call("find");
}
});
and here's the server-side method:
Meteor.methods({
insert:function(username, message){
var id = Messages.insert({
'message': message,
'user': Meteor.userId(),
'username': username,
'timestamp': new Date()
});
return "success";
},
'find': function(){
return Messages.find({},{sort:{timestamp:-1}}, 20).fetch();
}
});
I'm new to MeteorJS, I just brought it up yesterday, so maybe something really basic that I'm missing, but I've been banging my head about it for two hours now and have 0 successes. I have no blocking or automatic activation. This does not mean that this is a useful product or anything else, I use it to teach myself, so I know I am doing some unsure things.
source to share
In this case, it's mostly about misunderstanding the Meteor data model.
While it is possible to send data using a method call, typically you want to use publications and subscriptions to send data to the client.They have the almost magical property that requests live , meaning any updates to the request will be sent to the client automatically. The current code you have, if it works as expected, will have no live data. The specific problem is that it Meteor.call
is asynchronous, so your message helper won't see anything.
Instead, here's what you want to do. On the server, you'll create a post collection post:
Meteor.publish("someWeirdName", function() {
return Messages.find({},{ sort: { timestamp:-1}, limit: 20});
});
Note the differences from your code: no fetch()
, because we need a live cursor, but 20
- this is probably what you intended to use as a constraint. Note that I also named this someWeirdName
because it is the name of the publication , not the collection that you will use to subscribe to the client. For a more detailed explanation, you may need this post .
Then on the client you just need the following:
Meteor.subscribe("someWeirdName");
Template.messages.helpers({
showMessages: function(){
return Messages.find();
}
});
Note that your previous call Meteor.subscribe("Messages")
did nothing because there was no post named Messages
. Also, we are going to use a client side cache client to create a cursor to display messages.
Additionally, this code requires the following to be specified on the server and client:
Messages = new Mongo.Collection("callMeWhateverYouWant");
Note that the argument used to instantiate this collection has nothing to do with how you reference the collection in your code, unless you are writing a custom post . It simply identifies the collection in the underlying database.
source to share
Calling the isync method, so returning the result in the helper will not do any good. Likewise, sampling is not reactive.
showMessages: function(){
return Messages.find({},{sort:{timestamp:-1}, limit: 20});
}
Go ahead and read to discover the meteorite before creating your own project. I keep trying to teach myself new things, but a good solid foundation will work wonders and remove a lot of frustration.
source to share
I've prepared a few MeteorPads for those starting to ask questions. You can find some first instructions here.
http://meteorpad.com/pad/Ba5DTe94NjFi3ZTPA/Playground_Flow-Router_Chat
Good luck Tom
source to share