I have build an app with meteor 1.8 in webstorm, using default todos. App goes like that
/imports/api/TestCollection.js:’
import { Mongo } from 'meteor/mongo';
import { Factory } from 'meteor/dburles:factory';
import SimpleSchema from 'simpl-schema';
class TestsCollection extends Mongo.Collection {
constructor(collectionName){
super(collectionName);
console.log('created');
}
insert(doc, callback) {
const ourDoc = doc;
ourDoc.testField = new Buffer([0,1,2]);
const result = super.insert(ourDoc, callback);
return result;
}
}
export const Tests = new TestsCollection ('tests');
Tests.schema = new SimpleSchema({
name: {
type: String,
max: 512,
required: true,
},
text: {
type: String,
max: 512,
required: true
},
testField: {
type: Buffer,
max: 512,
required: true
}
});
Tests.attachSchema(Tests.schema);
/imports/api/server/publication.js:
import { Meteor } from 'meteor/meteor';
import { Tests } from '../tests';
Meteor.publish('tests', function () {
return Tests.find({});
});
So it is my collection, now i want to make it reactive… and display a spinner when data loads, so i add simple package sacha:spin, which display spinner using {{> spinner }} here is html:
/imports/ui/pages/test_Tmp.html
<template name='test_Tmp'>
<h3>This is test page #1</h3>
<table>
<tr>
<th>name</th>
<th>info</th>
</tr>
{{#unless testsReady}}
{{ >spinner }}
{{else}}
{{#each getTests}}
<tr>
<td>{{name}}</td>
<td>{{text}}</td>
</tr>
{{/each}}
{{/unless}}
</table>
</template>
And js part
/imports/ui/pages/test_Tmp.js:
import './test_Tmp.html'
import { Mongo } from "meteor/mongo";
const Tests = new Mongo.Collection('tests');
Template.test_Tmp.onCreated(function() {
this.testsReady = new ReactiveVar(false);
var self = this;
var sub = this.subscribe('tests', function(){
if(sub.ready()) {
self.testsReady.set(true);
alert('testsReady is TRUE');
}
});
});
Template.test_Tmp.onRendered(function onRendered() {
//do some stuff
});
Template.test_Tmp.helpers({
testsReady(){
return Template.instance().testsReady.get();
},
getTests(){
var data = Tests.find({});
console.log(data);
return data;
}
});
The problem is, this doesn’t work!! testsReady updates to TRUE, when subscription is ready, alert windows is displayed, but template is not rerendered, it displays spinning spinner, unless i click on another link, so flow router will render another template in the same layout, and when i come back, i see data from collection displayed. Why reactive var doesn’t work and template not getting updated?
Here is my routes.js, which are imported only in client.js:
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
import '../../ui/layouts/my_Layout'
import '../../ui/pages/funny_Tmp'
import '../../ui/pages/test_Tmp'
FlowRouter.route('/stuff', {
name: 'funny.stuff',
action: function(params) {
BlazeLayout.render("my_Layout", {main: "funny_Tmp"});
}
});
FlowRouter.route('/test', {
name: 'funny.test',
action: function(params) {
BlazeLayout.render("my_Layout", {main: "test_Tmp"});
}
});
Can someone help? I stuck forever on this simple thing, maybe it has something to do with my modules? I have created my meteor app using todos template in webstorm 2019