This is the code I am using:
Contacts = new Mongo.Collection('contacts');
Template.contact.helpers({
contact: function() {
return Contacts.find({});
}
});
However the HTML is not returning the collection.
If you look at the meteor-boilerplate website, you can see that
"insecure" and "autopublish" are removed by default!
By default, Meteor includes the autopublish package which makes all data in the database available to the client. This is only suitable for early development, and any real project will remove it. So meteor-boilerplate removes it by default.
Without autopublish, you will need to publish the data yourself. You can try this:
// server code
Meteor.publish("contacts", function () {
return Contacts.find();
});
// client code
Meteor.subscribe("contacts");
Then your existing code should work.
For more information, see publish and subscribe from the Meteor docs.
In your HTML file you need to define the template:
<template name="Contacts">
{{#each contacts}}
{{name}}
{{/each}}
</template>
In your java script you would define the helper template and return the Contacts collection.
Contacts = new Mongo.Collection('contacts');
Template.Contacts.helpers({
'contacts': function(){
return Contact.find()
}
});
Check out this tutorial for more information - How To Create Templates in Meteor - Meteor Tutorial
Related
What i am trying to do is create a custom stripe form in ReactJS ,i don't want to use react-stripe-elements , i have already built a custom form and after some digging i found a solution that fits my needs but the solution was in vanilla Javascript, so what it does is that it appends a script to the body and creates a global Stripe variable that can you can use to access the Stripe API
import React from "react";
const loadStripe = () => {
if (!window.document.getElementById("stripe-script")) {
var s = window.document.createElement("script");
s.id = "stripe-script";
s.type = "text/javascript";
s.src = "https://js.stripe.com/v2/";
s.onload = () => {
window["Stripe"].setPublishableKey(
"PUBLIC_KEY_HERE"
);
};
window.document.body.appendChild(s);
}
return window.Stripe;
};
export default loadStripe;
and then i use it as
let Stripe = loadStripe();
const onSubmit = (cardNumber,exp_month,exp_year,CVC) =>{
Stripe.card.createToken(
{
number: cardNumber,
exp_month: exp_month,
exp_year: exp_year,
cvc: CVC,
},
(status, response) => {
console.log(status);
console.log(response);}
}
}
the above solution obviously does work but I was hoping that someone could point me in the right direction so that i could get rid of the loadStripe Component and use Something like a npm package or a React Specific solution (because as far as i know i shouldn't be creating and appending scripts in the body using JS)
Any Help would be much appreciated :)
I was hoping that someone could point me in the right direction so that i could get rid of the loadStripe Component and use Something like a npm package or a React Specific solution
If you're looking for an npm package, Stripe recently released their own official library to load Stripe.js which you can find here:
https://www.npmjs.com/package/#stripe/stripe-js
In fact, #stripe/stripe-js works much in the same way as the custom loadStripe function you have now as you can see here:
https://github.com/stripe/stripe-js/blob/master/src/shared.ts#L7-L24
I should note that it's perfectly okay to append scripts in the body using JavaScript as long as you have a good handle on how the script loads (i.e., through async Promises).
That being said, using your loadStripe function or Stripe's official one (#stripe/stripe-js) isn't a requirement. Controlling how and when to inject Stripe.js in the DOM is very helpful when doing server-side rendering (0). But, if that isn't something you're doing, you can just include Stripe.js manually (1) in the <head> of your html like this:
<html>
<head>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
What i am trying to do is create a custom stripe form in ReactJS ,i don't want to use react-stripe-elements
If you are using React v16.8 or greater, the official recommendation would be to use our new React library which you can find here:
https://www.npmjs.com/package/#stripe/react-stripe-js
But if your heart's set on not using either #stripe/react-stripe-js or the older react-stripe-elements library, it is definitely possible to roll your own custom integration. Here's a very bare-bones example of how you could do that:
https://codesandbox.io/s/eager-cdn-krumt
I'm including Stripe.js here: https://codesandbox.io/s/eager-cdn-krumt?file=/public/index.html:1062-1116
And integrating it into a component here: https://codesandbox.io/s/eager-cdn-krumt?file=/src/Checkout.js
Be sure to replace pk_test_xyz with your own publishable key before testing it out.
Hope this helps!
[ 0 ] https://alligator.io/react/server-side-rendering/
[ 1 ] https://stripe.com/docs/js/including
I am trying to create automatically generated documentation for our node.js API. I am using jsDoc style comments and gulp to run the generation. I am using the plugin jsdoc2md and this gulp plugin to create markdown style documentation.
I am running into an issue of my typedefs not showing up in the generated documentation when i try to use a template. They show up when i do not use a template
Here is gulp task
gulp.task("docs", function() {
return gulp.src(["./documentation/typedefs.js", "./routes/**/*.js"])
.pipe(concat("README.md"))
.pipe(gulpJsdoc2md({ template: fs.readFileSync('./README.hbs', 'utf8') }))
.on("error", function(err) {
gutil.log(gutil.colors.red("jsdoc2md failed"), err.message);
})
.pipe(gulp.dest("./api"));
});
Here is my template
# My Super Cool API
This is where stuff happens
# Search API
{{#module name="search-api"}}
{{>body~}}
{{>member-index~}}
{{>separator~}}
{{>members~}}
{{/module}}
The output of this is a markdown with the appropriate functions and modules, but lacking the typedefs. So my question is:
How can I get my typdefs to render in the template?
The documentation doesn't have much. Any ideas?
I am using meteor-sharejs
I add the package
meteor add mizzao:sharejs-ace
Now in my view, i add the document
{{> sharejsAce docid="javascriptDoc" id="editor"}}
I know that meteor-sharejs creates ops collection and docs.
My Questions is how do i grab the current raw text of of the "javascriptDoc" document on the server so i send it somewhere else. Like listen for changes and grab that content.
You probably want to check the ShareJS API for this.
mizzao:sharejs is currently using ShareJS 0.6.3; here is the server API. You probably want to use the getSnapshot function.
The package makes ShareJS available in ShareJS.model, so try ShareJS.model.getSnapShot(...) on the server.
Note: I wrote this package.
My final solution
Meteor.methods({
getDocumentText: function () {
var result = getSnapshotSync('htmlDocumentId');
return result.snapshot;
}
});
//create sync method.
getSnapshotSync = Meteor.wrapAsync(ShareJS.model.getSnapshot)
What I basically try to accomplish is to re-use jade partials/templates when getting data through a socket connection. Non working example:
socket.on('company_created', function(company) {
var html = include _company;
$('#companies ul').append(html);
});
Normally I had to create a new li and set the content like so (which is working as expected):
$('#companies ul').append($('<li>').text(company.name));
This is okay for a simple list, but if I had complexer list and stuff, this could get messy pretty quick, plus I had to write plain HTML again, so I figured re-using my already existing jade templates with all their goodness would be awesome, but had not luck, yet.
Any clue?
PS: Please do not tell my to use Ember, Backbone, Derby, Meteor, Angular or whatsoever.
Thanks in advance!
You can compile your jade sources to JS with jade.compile. Then include these sources in the client-side javascript, include jade's runtime.min.js, and refer to your jade templates as to normal JS functions in your client-side code.
For example,
server.js
app.get('/templates/:template.js', function (req, res) {
var template = req.params.template;
response.end([
"window.templates = window.templates || {};",
"window.templates[\"" + template + "\"] = " + jade.compile(template + ".jade", { client: true; });
].join("\r\n"));
});
client.js
$(function() { $("#placeholder").html(window.templates["content"]({user: "Daniel" })); });
content.jade
h1: Hello #{user}!
index.jade
!!!
html
head
script(src='/lib/jquery/jquery.js')
script(src='/lib/jade/runtime.min.js')
script(src='/templates/content.js')
script(src='/scripts/client.js')
body
#placeholder
Note that the code above might be syntactically incorrect and is provided solely to illustrate the idea.
we have a build step that compiles them to functions sort of like penartur mentioned. I dont use extend or include (which dont work on the client anyway ATM), but personally I find we have absolutely no need for that on the client at all since the DOM provides all the separation we need.
I am in a bit of trouble as I am not able to find resources and/or tutorials that give me enough knowledge how to do this properly:
I am building a Couchapp uppon a contact database. For this I need to have a unordered list of the contacts(only the names) on the landing page. After examining this now for quite a time and examining the http://kansojs.org framework, I think I might have to ask here at Stackoverflow how this is done properly...
Here is what I ended up with (not working):
I started to setup a view (file 'views/contactslist/map.js ):
function(doc) {
if (doc.displayName) {
emit(doc.displayName, {displayname: doc.displayName});
}
};
... which basically gives me back this response:
{"total_rows":606,"offset":0,"rows":[
{{"id":"478d86edbbd94bbe627f3ebda309db7c","key":"Al Yankovic","value":{"displayname":"Al Yankovic"}},
{"id":"478d86edbbd94bbe627f3ebda30bb5cb","key":"Al-Qaeda","value":{"displayname":"Al-Qaeda"}}
]}
Afterwards, I created a new directory in the evently directory, 'contacts' and created the files "mustache.html", "data.js" and "query.json":
mustache.html:
<ul>
{{#contacts}}
<li>
<div class="name">
{{displayname}}
</div>
<div style="clear:left;"></div>
</li>
{{/contacts}}
</ul>
data.js:
function(data) {
$.log(data)
var p;
return {contacts : data.rows};
};
query.json:
{
"view" : "contactslist",
"descending" : "true"
}
Then I added
and
$("#contacts").evently("contacts", app);
to the index.html in the _attachments directory.
Watching the console in Firebug I can not see any Request/Response from CouchDB returning my vie's results, so I think it is not even requested. Where did I take the wrong turn?
data.js, query.json and mustache.html need to be in evently/contacts/_init/
_init means that this gets executed on widget initialization.
Going over this Tutorial helped a lot.