Meteor 1.3 and includes: where to declare your helpers? - javascript

I'm struggling to understand Meteor 1.3's include logic.
For an app I'm trying to put together, I have in /client/main.js:
import '../imports/startup/accounts-config.js';
import '../imports/ui/body.js';
import '../imports/ui/home.js';
import '../imports/ui/map.js';
import '../imports/ui/admin.js';
...
In /imports/ui/body.js, I have (I use flow router and mainLayout is the main layout, in which all other templates are rendered):
...
Template.mainLayout.onCreated(function mainLayoutOnCreated() {
Meteor.subscribe('tasks');
Meteor.subscribe('categories');
});
...
Then I have the following function:
Template.admin.helpers({
categories() {
return Categories.find({}, { sort: { createdAt: -1 } });
},
});
If I put this function in /imports/ui/body.js, I'm able to call 'categories' in the template with name 'admin'. However, when I put this function in /imports/ui/admin.js, I get a useless exception in the javascript console:
Exception in template helper: categories#http://localho...
How is it that moving the file in which this helper is declared, while still being included in the same 'main' file, results in an exception being thrown?

You should import the desired template and the templating package at the top of your admin.js file.
import {
Template
} from 'meteor/templating';
import '.deep/admin.js';
Template.admin.helpers({
categories() {
return Categories.find({}, { sort: { createdAt: -1 } });
},
});

Related

FlowRouter is not defined in individual templates

Using Meteor, I started with a default Meteor project with...
meteor create --full
I added a route, in router.js, like so:
FlowRouter.route('/group/:_id', {
name: 'App.groups.show',
action() {
if (!logged_in()) {
FlowRouter.go("App.home");
}
else {
this.render('App_body', 'Group');
}
},
});
router.js is here:
/imports/startup/client/router.js
The Group template is this:
<template name="Group">
{{> user_group}}
</template>
And for user_group, I have this:
Template.user_group.onCreated(function user_groupOnCreated() {
console.log("id", FlowRouter.getParam('_id'));
});
This results in:
ReferenceError: FlowRouter is not defined
at Blaze.TemplateInstance.user_groupOnCreated (user-group.js:46)
at template.js:119
at Function.Template._withTemplateInstanceFunc (template.js:490)
at fireCallbacks (template.js:115)
at Blaze.View.<anonymous> (template.js:195)
at fireCallbacks (view.js:276)
at Object.Tracker.nonreactive (tracker.js:603)
at view.js:273
at Object.Blaze._withCurrentView (view.js:533)
at Object.Blaze._fireCallbacks (view.js:272)
I also do not have access to FlowRouter.go in my templates.
What am I missing?
You need to import FlowRouter in every js that actively uses it (in your example the Template):
import { FlowRouter } from 'meteor/kadira:flow-router'
Template.user_group.onCreated(function user_groupOnCreated() {
console.log("id", FlowRouter.getParam('_id'))
})

Ember - Cannot create helper in test

I'm trying to create a helper for my test in order to simulate a model.
I'm receiving the follow error, though:
: makeInventoryObjects is not defined
My test helper:
// ../tests/helpers/make-inventory-objects.js
import Ember from 'ember';
export default Ember.Test.registerAsyncHelper('makeInventoryObjects', function() {
const inventoryObjects = [{'id': 1, 'name': 'test'}];
return inventoryObjects;
});
My start-app in helpers contains application.injectTestHelpers();
The test which is failing:
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
// I tried to import manually too and it did not work
// import makeInventoryObjects from '../../helpers/make-inventory-objects';
moduleForComponent('model-table', 'Integration | Component | model table', {
integration: true
});
test('it renders', function(assert) {
this.set('inventoryResult', makeInventoryObjects());
this.render(hbs`{{model-table inventoryResult}}`);
assert.equal(this.$().text().trim(), '');
});
Whenever I add the comment of the import, I get this error:
: _frontendTestsHelpersMakeInventoryObjects["default"] is not a function
The main reason what I've done was failing is because I was trying to initialize the helper within the startApp and that is done only for acceptance test, not integration test.
I had to rewrite my helper to:
// ../tests/helpers/make-inventory-objects.js
export default function makeInventoryObjects() {
const inventoryObjects = [{'id': 1, 'name': 'test'}];
return inventoryObjects;
});
and then import in my test with the commented line.
Also, as a side note I missed to add in my .jshintrc my test helper if I were doing acceptance test. So, it was wrong for acceptance test as well.

Cannot read property 'insert' of undefined. Am I not publishing correctly?

My app was working perfectly till I externalized the collection definition from the client/main.js file to the ../imports/api/tasks.js file.
After this move I keep getting this error message in my browser: Uncaught TypeError: Cannot read property 'insert' of undefinedin my browser console. This error message points to line main.js:1206 which is:
/myApp
../client/main.js
import { Images } from '../imports/api/tasks.js';
Meteor.subscribe('Images');
FS.Utility.eachFile(event, function(file) {
var teste = Images.insert(file, function (err, fileObj) {
var insertedIdSession = teste._id;
session.set("insertedBuyId", insertedIdSession);
Images.find().count());
});
/myApp
../imports/api/tasks.js
import { Mongo } from "meteor/mongo";
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})] });
/myApp
../server/main.js
import { Images } from '../imports/api/tasks.js';
Meteor.publish('Images', function(){
return Images.find();
});
I have researched but failed to find a solution for this. Kind point out where i am going wrong.
It is telling you that "Images" is not defined.
From what I can see of your code, ../imports/api/tasks.js does not export anything, which means that
import { Images } from '../imports/api/tasks.js';
won't give you anything, in fact it will replace the global variable Images with a null. So I think the solution is to replace the imports with this:
import '../imports/api/tasks.js';
Or you can put tasks.js in /common and that will do the same job
You need to export your Images collection in order to import it to other files, like this:
import { Mongo } from "meteor/mongo";
export const Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});

Why aren't any of collections being defined after publishing them?

I keep on getting these error messages in my browser console:
Exception in template helper: ReferenceError: "CollectionNames" is not defined
The "CollectionNames" being all the collections I have in my app. I have researched but cant find a suitable solution.
My environment: I am running meteor 1.2
The task.js file is where I define each collection. Below is the code in task.js
/myMeteorApp
--/imports/api/tasks.js
import { Mongo } from "meteor/mongo";
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
Images = new FS.Collection("images", {
stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})] });
buyList = new Mongo.Collection("BuyList");
WhoAreWe = new Mongo.Collection("whoDb");
merchantReviews = new Mongo.Collection("merchantReviews");
Messages = new Meteor.Collection("messages", {transform: function (doc)
{ doc.buyListObj = buyList.find({sessionIDz: {$in: [doc.buyList]}}); return doc; }});
The server is where I publish the collections. Below is the code:
/myMeteorApp
--/server/main.js
import buyList from '../imports/api/tasks.js';
import Messages from '../imports/api/tasks.js';
import Images from '../imports/api/tasks.js';
import WhoAreWe from '../imports/api/tasks.js';
import merchantReviews from '../imports/api/tasks.js';
Meteor.startup(() => {
// code to run on server at startup
Meteor.publish('buyList', function(){
return buyList.find();
});
Meteor.publish('Messages', function(){
return Messages.find();
});
Meteor.publish('Images', function(){
return Messages.find();
});
Meteor.publish('WhoAreWe', function(){
return WhoAreWe.find();
});
Meteor.publish('merchantReviews', function(){
return merchantReviews.find();
});
});
And the client is where I subscribe for the collections. Find below the code:
/myMeteorApp
--/client/main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Meteor.subscribe('Messages');
Meteor.subscribe('WhoAreWe');
Meteor.subscribe('Images');
Meteor.subscribe('buyList');
Where am I going wrong. I've been at this for many days now... Kindly help!
The collections must be defined on both the client and the server! Just import your collection names on the client side as well as the server:
import { buyList, Messages, Images, WhoAreWe, merchantReviews } from '../imports/api/tasks.js';
You still have to subscribe to the various publications of course.
It is a naming problem, when you publish the collection, you should refer to the collection name (messages), not the meteor variable (Messages)
Meteor.publish('messages', function(){...

Import and Export using a complex name with ES2015

Using node unit, I want to translate from ES5 the name of the test suite.
So I had in parser_test.js
exports['Awesome Parser Test'] = {
setUp: function(done) {
done();
},
....
}
And now I have in parser_test.es6
export default {
setUp: function(done) {
done();
},
....
}
Then in another file named index.es6
import parserTest from './parser_test';
export {
parserTest
}
Node unit displays the suite name as parserTest which is OK, but I would prefer something like Awesome Parser Test
You can't have spaces in the import name. It's just a variable which is assigned the export of the file. You can, however, call it what ever you want. Eg:
import awesomeParserTest from './parser_test';
Or
import Awesome_Parser_Test from './parser_test';

Categories

Resources