Good Day,
I'm trying to create a simple search function using the easy search package.
In a nutshell I have done the following-
Defined a schema and index on the client as such:
const Patients = new Mongo.Collection('patients');
const PatientsIndex = new EasySearch.Index({
collection: Patients,
fields: ['name'],
engine: new EasySearch.MongoDB()
});
I've entered the following values into the database:
meteor:PRIMARY> db.patients.find()
{ "_id" : ObjectId("57d6a9f71bad26ba07748f9d"), "name" : "Paul" }
Created a template helper on the client side:
Template.searchBox.helpers({
patientsIndex: () => PatientsIndex
});
And lastly I've created a template which should output the results:
<template name="searchBox">
{{> EasySearch.Input index=patientsIndex }}
<ul>
{{#EasySearch.Each index=patientsIndex }}
<li>Name of the patient: {{name}}</li>
{{/EasySearch.Each}}
</ul>
</template>
Now for some reason this just wont work, it renders nothing to the template, I' very new to this and would really appreciate some assistance.
Thanking you.
From your code samples it looks like you're trying to refer to both Patients and PatientsIndex globally. Assuming you have your Patients and PatientsIndex declarations in a shared client/server location (like /lib), then you should remove the const keyword. That will make sure these declarations are available globally, and will allow your Template to use them. Here's a modified version of your code that will work:
/lib/collection.js
Patients = new Mongo.Collection('patients');
PatientsIndex = new EasySearch.Index({
collection: Patients,
fields: ['name'],
engine: new EasySearch.MongoDB()
});
/client/main.html
<body>
{{> searchBox}}
</body>
<template name="searchBox">
{{> EasySearch.Input index=patientsIndex }}
<ul>
{{#EasySearch.Each index=patientsIndex }}
<li>Name of the patient: {{name}}</li>
{{/EasySearch.Each}}
</ul>
</template>
/client/main.js
import { Template } from 'meteor/templating';
import './main.html';
Template.searchBox.helpers({
patientsIndex() {
return PatientsIndex;
}
});
Related
The generateLegend() wrapper does call the legendCallback defined in my Vue code but I'm lost to how to render the custom HTML in vue-chartjs. What do I do with htmlLegend as described in the vue-chartjs api docs like here.
Here is the line chart component I'm trying to render with a custom HTML object.
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['chartData','options'],
data: () => ({
htmlLegend: null
}),
mounted () {
this.renderChart(this.chartData, this.options);
this.htmlLegend = this.generateLegend();
}
}
Here is my vue template
<template>
<div class="col-8">
<line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
</div>
</template>
Well, htmlLegend holds the markup of the generated legend... so you can just put it into your tag via v-html
<template>
<div class="col-8">
<div class="your-legend" v-html="htmlLegend" />
<line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
</div>
</template>
mounted() {
this.renderChart( this.chartData , this.options );
var legend = this.generateLegend();
this.$emit('sendLegend', legend)
}
and then in the vue file add a new div to show the legend and also listen to the event to get the legend data
<div class="line-legend" v-html="chartLegend"></div>
<line-chart #sendLegend="setLegend" :chart-data="datacollection" :options="chartOptions"></line-chart>
and also add this to the data
chartLegend: null,
and you also need a method
setLegend (html) {
this.chartLegend = html
},
Many tutorials and documentations later, I still cannot display data from Mongo in the Meteor client.
import { Mongo } from 'meteor/mongo';
export const Skills = new Mongo.Collection('skills')
Template.Skills.helpers({
skills: function() {
return Skills.find();
}
});
skills.html
<template name="Skills">
<h2>My Skills</h2><ul>
{{#each skills}}
{{> SkillItem}}
{{/each}}
</ul>
</template>
entering Skills.find(); in the developer console does not really do anything except give me the following error.
Exception in template helper: ReferenceError: Skills is not defined
I am struggling to get my project to work with Routing, I imagine that something is really wrong.
currently the exception being logged
Error: There is already a collection named "person"
at new Mongo.Collection (packages/mongo/collection.js:240:15)
at meteorInstall.collections.persons.js (collections/persons.js:2:23)
at fileEvaluate (packages/modules-runtime.js:197:9)
at require (packages/modules-runtime.js:120:16)
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/app/app.js:198:1
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/boot.js:303:34
at Array.forEach (native)
at Function._.each._.forEach (/home/usr/.meteor/packages/meteor-tool/.1.4.3_2.7s3fq6++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/boot.js:128:5
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/boot.js:352:5
Exited with code: 1
Your application is crashing. Waiting for file change.
Following are my code:
routes.js (Loaded in the lib folder so that it loads first)
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', function () {
this.render('personTemplate');
});
Main Layout Template (to be the container for the entire App) + a yield container to direct the routes on the main template.
<template name="layout">
<nav class="deep-orange lighen-4" role="navigation">
<div class="nav-wrapper container left">
<ul class="right">
<li>test</li>
<li>about</li>
{{> loginButtons}}
<!-- <i class="material-icons" style="font-size:30px;color:grey">person</i> -->
</ul>
SiteName
</div>
</nav>
{{> yield}}
</template>
person.js (the collection definition file -- also located in the lib folder to load first)
import {mongo} from 'meteor/mongo';
export const Person = new Mongo.Collection('person');
The personTemplate definition
<template name="personTemplate">
{{#each person}}
{{> todosTest}}
{{/each}}
</template>
<template name="todosTest">
<ul>{{name}}</ul>
</template>
person helpers - which will perform the lookup to the person collection
import { Template } from 'meteor/templating';
import { Person } from '../../lib/collections/persons.js';
import { ReactiveVar } from 'meteor/reactive-var';
import '../templates/personTemplate.html';
Template.personTemplate.helpers({
person(){
var aPerson = Person.find({});
// check for existence before returning
return aPerson && aPerson.name
}
});
lastly my main.js file to load the collection on the server:
import { Meteor } from 'meteor/meteor';
import '../lib/collections/persons.js';
below a graphic to display the folder layout:
You are defining the collections 'Person' twice by having the same file in two different folders.
I'm trying to connect my app with mongodb. Adding a post with static array data works fine.
Problem: Nothing shows now up under {{post}}. If I check my DB, there is already data inserted.
Database Insert + Code:
db.calposts.insert({ post: "Hello world!", createdAt: new Date() });
WriteResult({ "nInserted" : 1 })
{{#each calposts}}
{{> posts}}
{{/each}}
<template name="posts">
<div class="panel-post" id="post-draggable">
<span>{{post}}</span>
</div>
</template>
if (Meteor.isClient) {
Template.calendar.helpers({
calposts: function () {
return CalPosts.find({});
}
});
}
Did you publish calpost collection to the client?
If not, in the server folder somewhere you need to use Meteor.publish() and then on the client side, run Meteor.subscribe() to subscribe to the publication.
Check out this page on meteor.com for more info on publishing and subscribing:
https://www.meteor.com/tutorials/blaze/publish-and-subscribe
Im new to meteor, I have a problem I can't get collection from mongodb (i use iron router )
/client/routes.js
Router.route('/page', function(){
this.render('page');
});
/client/foo.js
city = new Mongo.Collection('data');
if (Meteor.isClient) {
Template.foo.helpers({
data: function(){
return city.find();
}
});
}
client/views/foo.html
<template name="foo">
{{#each data}}
{{> all_data}}
{{/each}}
</template>
<template name="all_data">
<li>{{city}}</li>
</template>
in chrome console the command city.find() give me:
L…n.Cursor {collection: LocalCollection, sorter: null, _selectorId:
undefined, matcher: M…o.Matcher, skip: undefined…}
and in mongo console db.data.find() it work fine
i think there a problem to connect to mongodb
The collections need to be defined on both server and client side for autopublish to work -- files in /client are only executed on the client side, so city = new Mongo.Collection('data'); is unknown to the server.
Move the file
/client/foo.js
into the parent directory
/foo.js
And it will likely work