Meteor Collections are not displaying - javascript

I'm following the book Getting Started With Meteor and I'm really not getting far because simple errors keep blocking me.
At this point in time I've started writing the initial app in the book in which we make a new global connection.
Lists = new Meteor.Collection("lists");
We then add some data to that collection.
lists.insert({Category:"DVDs", items: {Name:"Item Name",Owner:"me",LentTo:"Internet"}})
I can verify that the data is entered by checking in the console
lists.find({}).count(); //returns 2
lists.findOne({Category:"DVDs"}) //returns the DVD category
However when I try to display this content in the DOM nothing is displayed.
<div id="categories-container">
{{> categories}}
</div>
<template name="categories">
<div class="title"><h3>My Stuff</h3></div>
<div id="categories">
{{#each lists}}
<div class="category">
{{Category}}
</div>
{{/each}}
</div>
</template>
This displays only my Title. I get no errors in the browser console or the command line console. Not sure how to diagnose this.

I am pretty sure the reason is because you have
Lists = new Meteor.Collection("lists");
But then you do:
lists.insert({Category:"DVDs", items: {Name:"Item Name",Owner:"me",LentTo:"Internet"}})
lists.find({}).count(); //returns 2
lists.findOne({Category:"DVDs"}) //returns the DVD category
But you should do
Lists.insert({Category:"DVDs", items: {Name:"Item Name",Owner:"me",LentTo:"Internet"}})
Lists.find({}).count(); //returns 2
Lists.findOne({Category:"DVDs"}) //returns the DVD category
Because it is case sensitive. Then in your Template helper do a Lists.find({}) and you should be good to go.

Did you define a template helper to display your content?
You may need:
Template.categories.lists = function() {
return Lists.find({});
};
Check out the documentation for specifics:
http://docs.meteor.com/#templates
For faceting on categories, you'll probably want to set a reactive session value.

To make your time with the book Discover Meteor easier: If you have software that will compare two directories, get the book from git in a parallel directory to what you are typing in. Then, when you have problems, go to that directory in the terminal and git checkout the chapter. Now, compare the two folders and you'll see your spelling errors.
Learning quickly evolving stuff on the internet is a hard process. A lot of the tutorials you find only work for a period of time.
But the meteor book is different. They keep the code up. I personally typed along, and found my errors were solved on a better read (and often less thinking I knew what I was doing). I've talked two twenty-somethings through it, and they also consistently made new and creative punctuation or spelling choices for quite a while. There are also
meteor add xxx
meteor remove xxx
commands that are easy to miss.
But please trust that source (assuming you just got it, and aren't working from some old pdf) and doubt yourself, just for this tutorial. :)

By going off the comments here and by reading a bit more, the reasoning why was because there was nothing telling meteor that the template was defined.
This was solved by the following code:
Template.categories.lists = function (){
return Lists.find({}, {sort: {Category: 1}});
}
This tells it to find all of the records in the Lists collection and sort them by Category.

Related

How to clear the log in ui5?

I am logging stuff in my sapui5 application.
At some point I get all logs logged so far withgetLogEntries() and persist them. Now can I somehow DELETE those logs from the jQuery.sap.logto not get them again when I getLogEntries() again?
Those are only the symptoms. The problem Root is that I do not have a uniqe key for those objects. But for the persistation I have to have a UID.
Just some ideas ;)
Idea 1:
I am not exactly sure what you real problem is but to accomplish you goal you can execute getLogEntries, save for example the amount of logged items or the item itself. If you want to log again you can just iterate until that position in order to cut the previous entries.
Idea 2:
On the other hand if its non productive code you can extend the existing Logger. Its defined in jQuery.sap.global. Load the dbg sources to get the ununglified version. Should be defined starting at line ~800.
Idea 3:
Extend the existing logger, the idea is to add additional code so that you don't need to change the existing logger but you register something like an after callback. That way you can add custom code.
jQuery.sap.log.oldDebug = jQuery.sap.log.debug
jQuery.sap.log.debug = function(,,){jQuery.sap.log.oldDebug(,,); /* Custom Code like adding own log to some array*/ }
jQuery.sap.log.getCustom = function() {/* get from custom array */}
jQuery.sap.log.reset = function() {/* delete all entrys in array */}
So it heavily depends on your usecase. Each solution has advantages and disadvantages. But have a look at the source, thats quiet helpful

Meteor.js : .find() returns nothing even though the database is not empty

So I'm making a pretty simple web app and I am currently trying to use a database in it.
However, even though I create the collection, then make the appropriate helper, when I try to use it nothing seems to be rendering. So I went into console and tried to see what Unis.find().fetch() would return (Unis being my collection), and it returns an empty array, so that explains why nothing is rendering. However, when using the mongo command prompt I can find items as well as insert them. I am really confused as to what might be happening.
My JavaScript related to the collection, so the helper for my template and defining the collection:
Unis = new Mongo.Collection("unis");
if (Meteor.isClient) {
// Rendering
Template.dashboard.helpers({
unis: function() {
return Unis.find();
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
HTML for using the collection, but I don't think this is the problem here
<template name="dashboard">
<div class="container">
<div class="row"></div>
<div class="row"></div>
{{#each unis}}
{{> uni}}
{{/each}}
</div>
</template>
<template name="uni">
{{name}}
</template>
Using Unis.find().fetch(); doesn't return anything but it does in mongo
Any help would be really appreciated, as I don't have much of an idea what to do. I am also new to Meteor, so not sure if this is really obvious or not.
EDIT: Added actual code instead of pictures.
I fixed it and it was a very obvious mistake, just I failed to disclose important information.
The JavaScript I posted was in "website.js" in "client" folder inside my directory, so it was only getting defined on the client.
I simply just made a "shared.js" on the root of my directory and put that line in there and done!
Still thank you all for your replies!

pre-processing data into a hard-coded array

I have a question about hard-coded arrays. I looked at several previously posed questions about hard-coded arrays in hopes of getting my answer that way. But, for the most part, I don't understand the answers, and this is the only one that seems like it might be relevant:
glob() to build array of files, or hardcode array? Speed is key, but automation is nice
My question is a lot simpler, though. I have several worksheets in an OpenOffice spreadsheet which I have chosen to pre-process into a large hard-coded array which I will then store inside my 'server' dir. In order to test this, I put the following lines of code into a file called 'distances.js' and placed that file in a 'server' folder directly inside my app directory:
var distances = {};
distances['Salt Lake City.Washington, DC'] = 2080;
distances['Salt Lake City.Cheyenne'] = 434;
distances['Salt Lake City.Denver'] = 536;
distances['Salt Lake City.Carson City'] = 534;
Then I ran the following command in my console to see if I'd be able to access these array values in my app:
console.log(distances['Salt Lake City.Carson City']);
The result I got was:
Uncaught ReferenceError: scores is not defined(…)
I then attemped to insert those lines inside the regular project.js file inside the Meteor.startup function inside of Meteor.isServer:
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
var distances = {};
distances['Salt Lake City.Washington, DC'] = 2080;
distances['Salt Lake City.Cheyenne'] = 434;
distances['Salt Lake City.Denver'] = 536;
distances['Salt Lake City.Carson City'] = 534;
});
}
This resulted in the same error.
I have the 'insecure' package installed in my project, so security shouldn't be an issue. I think I'm just missing something fundamental about where code needs to go in order to be seen by the compiler/interpreter. Can anyone help?
I'm sort of half expecting someone to suggest that I put all of this information into a collection. I don't currently understand why it would be advantageous to do so, but maybe I'm missing something fundamental about the usefulness of doing it this way. If so, could someone explain or point me to a place where I can read about this for myself? I have worked through a couple of meteor tutorials, most recently Your Second Meteor Application. And these are excellent tutorials from which I've learned a lot. But I feel like there are still holes in my knowledge which need to be addressed, this being a prime example.
My plan is to access these hard-coded array elements through a function call which looks something like this:
getDistance('Salt Lake City','Cheyenne')
Because I don't store backwards values, eg. the distance from Cheyenne to Salt Lake City, I intend to set up the function so that, if a specific reference is undefined, it will turn the two elements around and call the function again the same way but with those inverted values (ie. getDistance('right','left') in place of getDistance('left','right')).
But, currently, I can't even get past step one.
Thanks in advance for any assistance you can provide me with.
The answer would seem to be to use the fs module to read data out of your textfile and into your collection. I'm still working on getting that going, but there's more info here: Using nodejs fs module within my meteor app

"TypeError: chains is undefined " when adding a handlebars if helper and navigating to homepage of app

I have a handlebars template in my Ember app.
{{#if image}}
<img src="{{unbound image}}" />
{{/if}}
The if statement is working correctly but it seems to be breaking when navigating back tot he homepage. I get this error when I go back to the index route.
TypeError: chains is undefined
ember.js (line 4177)
var chains = this._chains, node = chains[key];
When I remove the if conditional in my handlebars template. I no longer get the error and I can go back to the homepage with no issues.
I am using Ember JS Beta 1.5.0-beta.2, Handblebars 1.3.0 and jQuery 1.11.0.
It is really strange that the if conditional could break this, but I spent several hours trying to narrow it down and this is what I concluded to be the issue.
I saw the same issue when the property name in the {{if}} clause was starting with a capital letter.
I think the following issue discussion might be stating the root cause https://github.com/emberjs/ember.js/issues/1493
sly7-7 commented 2 years ago
I think this is because using
Capitalize names in handlebars makes it to search for globals. When
writing Foo.Bar, I think handlebars is trying to resolve the
namespace Foo, then a class or property Bar.
I too have seen the same error. Following the hints from this thread, I concluded that it was indeed from the retuning JSON model having uppercase key names. In my case, the JSON I was returning looked like this:
{
ClassName: "3rd Grade - Thompson",
SubjectID: "20509",
SubjectName: "English"
}
This JSON was causing the 'chains is undefined error to appear. In my Ember route, where I defined the model, I ran the returning JSON through the following code to make all key values lowercase:
App.GradesRoute = Ember.Route.extend({
model: function(){
var url = "https://URL-To-JSON-API";
var grades = [];
return Ember.$.getJSON(url).then(function(data){
$.each(data, function(index, obj){
var grade = {};
$.each(obj, function(key, value){
grade[key.toLowerCase()] = value;
});
grades.push(grade);
});
return grades;
});
}
});
Then in my handlebars code I just switched all of my key names to lowercase like so:
<script type="text/x-handlebars" id="grades">
{{#each grade in model}}
<p>
{{grade.classname}}
{{#if grade.subjectid}}
{{grade.subjectname}}
{{/if}}
{{grade.number}} / {{grade.letter}}
</p>
{{else}}
<p>No grades posted</p>
{{/each}}
And it worked like a charm. Hope this helps someone. I know I spent a good few hours trying to figure this out, hopefully I can spare someone else the trouble.
You're most likely in the namespace of the {{if}} clause, therefore it behaves differently.

Adding Models to Backbone.js Collection Silently Fails

I am implementing a Blog Engine as a learning exercise for a new job. I have a Backbone.js Collection class called BlogList that is composed of BlogModel objects (a BlogModel is a single post to a blog). I have a masterBlogList that keeps all blog posts in memory for the lifetime of the application (I realize this is not a realistic design, but it is part of the spec).
I have chosen to use masterBlogList to hold the canonical state of the application. All new posts, edits, etc. are persisted to the database (MongoDB) as well as masterBlogList. When I want to display a subset of the posts in masterBlogList, I copy them into a new BlogList instance and then narrow this new instance down based on search criteria. Again, I realize this might not be the best design (cloning BlogModels and BlogLists), but it is what I've got and I'd prefer not to rework it.
The problem is that copying one BlogList to another is not working. Even when the source list is non-empty, the destination list always ends up being empty. I have tried to debug this every which way with no luck. Here is the relevant portion of the BlogList source code:
// BlogList
$ (function () {
App.BlogList = Backbone.Collection.extend ({
model : App.BlogModel,
url : '/blog-entries',
comparator : function (a) {
return -(new Date (a.get ('date')));
},
populateFromMemory : function (sourceList) {
// this.reset ();
var self = this;
sourceList.each (function (postModel) {
self.add(postModel);
});
var foo = new App.BlogModel();
this.add(foo);
},
(continued...)
Even the last bit regarding foo is not working. I've also tried adding a clone() of postModel and also new App.BlogModel(postModel.toJSON()).
Any help would be extremely appreciated!
Sorry to have bothered anyone :<, but I got it working. The code actually does work as written above. The problem is that my search criteria were filtering out all of the posts, so I wasn't seeing anything. End of a long day! Thanks to those who tried to help me...

Categories

Resources