meteor Flashcards
meteor: To run your app on localhost, type
cd into it and type meteor
meteor: To create a new app, type
meteor create my_app
meteor: To render code into your html, type
{{myVar}}
meteor: To create a for loop in a template, type
{{#each items}}
{{> item}}
{{/each}}
meteor: To run code only on client, type it into
if (Meteor.isClient) {
}
meteor: meteor parses your template to find
head, body and template
meteor: templates can be rendered in HTML by typing
{{> templateName}}
meteor: To create an if statement in a template, type
{{#if}}
meteor: To pass data into templates from your JavaScript code, type
if (Meteor.isClient) {
Template.body.helpers({
myCollection: [
{ field: "String" },
{ field: "String" },
]
});
}meteor: To create a template, type
-template name=”templateName”>
…
-/template>
meteor: To create a database collection, type
MyCollection = new Mongo.Collection(“my-collection”);
note: remember new
meteor: To pass data into a template from a database query as a helper, type
Template.body.helpers({
getCollection: function () {
return MyCollection.find({});
}
})meteor: Items inside collections are called
documents
meteor: To access the mongo console from the terminal, type
meteor mongo
meteor: To insert a document into a collection inside the mongo console, type
db.collectionName.insert({ field1: “string”, createdAt: new Date });
meteor: To listen to and handle an event in a template, type
Template.templateName.events({
“click .css-class”: function(event, template_instance)} {
event.preventDefault();
})
meteor: To access the value of an input field from a form submit event, type
event.target.fieldName.value
meteor: To clear the value of an input field from a form submit event, type
event.target.fieldName.value = “”;
meteor: To sort the data going into a template, type
MyCollection.find({}, {sort: {field1: -1}});
meteor: In a collection, every inserted document has a unique
_id
meteor: To access the _id of the event currently being handled, type
this._id
meteor: The update function on a collection takes
two arguments
meteor: To update a field of a document, type
MyCollection.update({field1: “value”}, {
$set: {field: “value”}
});
meteor: To delete a document, type
“click .css-class”: function () {
MyCollection.remove(this._id);
}
meteor: To build and run your app for ios, type
meteor add-platform ios
meteor: To run your app in ios simulator, type
meteor run ios
meteor: To run and run your app in ios simulator, type
meteor run android
meteor: To build and run your app for ios, type
meteor add-platform android
meteor: To run your app on an ios device, type
meteor run ios-device
meteor: To run your app on an ios device while connected to a previously deployed server, type
meteor run ios-device –mobile-server my_app.meteor.com
meteor: to store temporary reactive state on the client use a
Session
meteor: Some listenable events are
change, click, submit, keypress, input
meteor: To pass is a var that in a count of all of the documents in a collection, type
documentCount: function () {
return MyCollection.find({}).count();
}
meteor: To enable user accounts and login ui, type
meteor add accounts-ui accounts-password
meteor: To access the id of a logged in user in app.js, type
Meteor.userId()
meteor: To access the username of a logged in user, type
Meteor.user().username
meteor: To display something in the view only if a user is logged in, type
{{#if currentUser}}
…
{{/if}}
meteor: To revoke client side permission to edit mongo, type
meteor remove insecure
meteor: To create a method for securely editting mongo, type
Meteor.methods({
insertMethod: function (text) {
if (! Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
MyCollection.insert({
field: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username
});
},
deleteMethod: function (Id) {
MyCollection.remove(Id);
},
setMethod: function (Id, set) {
MyCollection.update(Id, { $set: { field1: set} });
}
});meteor: adding properties and methods to Template.body.helpers({}) seems to
pass the body that data across all templates.
meteor: To set the value of a variable that is currently available in just the client and not the server, type
Session.set(‘varName’, ‘value’)
meteor: To return the value of a session variable, type
Session.get(‘varName’)
meteor: To set a default value for a session variable, type
Session.setDefault(‘varName’, ‘value’);
meteor: To add url routing, type into terminal
meteor add iron:router
meteor: the “items” in {{#each items}} is
the name of a function that returns an array
meteor: To render something from an {{#each items}} block if the function returns empty, type
{{#each items}}
{{else}}
{{/each}}
meteor: You can place functions that are callable from a template, and that return query data in
Template.templateName.helpers({})
meteor: CollectionName.find({}) returns a
cursor
meteor: Making the data available to the template using a cursor makes the ui
reactive
meteor: To create a mongo collection that is only on the browser you must
instantiate the mongo collection inside if (Meteor.isClient) {}
meteor: To search for atmosphere packages in the terminal type
meteor search package_name
meteor: To add a package, type
meteor add author:package_name
meteor: To see the installed packages, type
meteor list
meteor: To pass a {{var}} in a template as a param to a helper function, type
{{functionName item}}
meteor: A data context is
the data being passed into a part of the view
meteor: The data context can be accessed from javascript using
this.field_name
meteor: Packages that you install
do not need to be imported anywhere, they become available everywhere
websockets uses
DDP
DDP stands for
Distributed Data Protocol
meteor: To subscribe to a collection, type
Meteor.subscribe(“subscriptionName”)
note: Must match the name defined in publish function
meteor: To query the database after autopublish is removed, you must
Publish that data using a cursor in if (Meter.isServer) {} and subscribe to that data in if (Meter.isClient) {}
meteor: To create a cursor that publishes data from the server without autopublish, type
Meteor.publish(“subscriptionName”, function() {
return CollectionName.find({});
})
note: The subscriptionName can be anything, but the subscription function has to use the same name
meteor: To unsubscribe from a collection connection, type
subscriptionName.stop()
mongo: To list all your collections from the mongo shell, type
show collections
mongo: To return all the documents of a collection in a pretty way, type
db.collectionName.find().pretty()
mongo: To insert a new document into a collection from within the mongo shell, type
db.collectionName.insert({field1: “value”, field2: “value”})
meteor: To clear a form, type
var form = template_instance.find("form")
form.reset();meteor: The messages the server sends to the client are
added
removed
changed
meteor: To manually send an added message to the client, add
this.added(“collectionName”, “id”, {“field1”:”value”})
to the publish function
meteor: To manually send a ready message to the client, add
this.ready()
to the publish function
meteor: To give your subscribe function a callback function, type
Meteor.subscribe(“subscriptionFunctionName”, function(){
})
meteor: To send node the debug environment variable then debug on the server using chrome, type
NODE_OPTIONS=”–debug” meteor
node-inspector
meteor: To return an array of documents from the database, type
MyCollection.fetch()
meteor: RPC stands for
remote procedure calls
meteor: To call a meteor method from the client, type
Meteor.call(“functionName”, param1, function(err, result){
})
in isClient
note: The last param passed in must be a callback function
meteor: To create a meteor method on the server, type
Meteor.methods({
functionName: function() {
return ...
}
})
in isServer
meteor: A positional argument is an argument
sent into the function separated by commas
meteor: optimistic updating uses
a method stub
meteor: Meteor.methods can also be run
on the client
meteor: The local cache is just
an array of documents
meteor: To see everything in the local cache, type
into the chrome console
MyCollection._collection
meteor: To render a button that comes for free in github’s oauth package, type
{{> loginButtons}}
meteor: To return one document from a collection based on a field, type
MyCollection.findOne({field1: {
$in: [“value”]
})
meteor: To only publish to logged in users, type
if (this.userId)
return CollectionName.find()
else
return this.ready()
meteor: To control the permissions for users using mutator functions on the server, type
CollectionName.allow({
insert: function(userId, doc) {
return !!userId
},
update: function(userId, doc) {
return false
},
remove: function(userId, doc) {
return false
}
})mongo: Every time mongo mutates a collection it also
logs the change in a collection called opLog
meteor: When you make a request to meteor it returns
script tags in the head tag and an empty body tag
meteor: To create the templates, meteor in the background
uses createElement and appendChild to add stuff to the body
meteor: Spiderable works by
creating a virtual machine that renders the page on the server before serving to google bot
meteor: To add spiderable, type
meteor add spiderable
note: spiderable depends on phantomJS
meteor: The lookup chain is
the sequence of places meteor searches to find the property or method you are calling
meteor: To enter an object (returned from a helper) in a template and render a property of it, type
{{#with myObject}}
{{objectProperty}}
{{/with}}
or
{{myObject.objectProperty}}
meteor: To make a variable’s value reactive it must
be getting called by Session because the function it is in is what makes it reactive
meteor: it is a best practise that your helpers always
call functions so the are evaluated at call time and not page load
meteor: To put the client side code in its own file,
create a folder called “client” and put a js file in it
meteor: Putting the client side code in its own file allows you to
omit if (Meteor.isClient) {}
meteor: To make reactive functions rerun, meteor uses
computations
meteor: computations are
objects that hold the function you keep rerunning as well as some state about the function
meteor: computations rerun the function inside them by calling the method called
invalidate
meteor: The things that should go in the “public” folder are
images, favicons, and robots.txt
meteor: Files in the “private” folder
are only accessible to methods from the server
meteor: To put the server side code in its own file,
create a folder called “server” and put a js file in it
meteor: Files stored in a “lib” folder
are loaded before other files and are available to both client and server. Create the collections here.
javascript: To create a for loop, type
for (i = 0; i - array.length; i++) {
array[i]
}
meteor: To create a ReactiveVar on the client, type
myReactiveVar = new ReactiveVar(“value”)
meteor: To create a computation, type
computationName = Tracker.autorun(function() {
…
})
meteor: To set a default layout for all the routes type
outside of client and server
Router.configure({
layoutTemplate: “templateName”
})
meteor: To render a certain template when your navigate to a certain route, type
outside of client and server
Router.route(“/”, function(){
this.render(“templateName”)
})
meteor: To accept a variable into a route, type
Router.route(“/folder/:varName”, function(){
})
meteor: To return a variable that is passed into a route, type
Router.route("/folder/:varName", function(){
var varName = this.params.varName
})meteor: To pass a session variable into a route, type
Router.route(“/folder/:varName”, function(){
Session.set(“varName”, “value”)
this.render(“templateName”)
})
meteor: To pass in data based on the route, type
Router.route("/folder/:varName", function(){
this.render("templateName", {
data: function() {
return {key: "value"}
}
})meteor: To insert content from a child template into a parent template, type
{{> yield “contentForName”}} in the parent
{{#contentFor “contentForName”}}string{{/contentFor}}
meteor: Files from within the client, lib, or server folders are
loaded in alphabetical order
meteor: Files from within the client, lib, or server folders are
loaded in alphabetical order
meteor: Files that should go in the client folder are
html, css, and client side js
meteor: The js file in the lib folder should hold
the collection variables
javascript: To coerce a value into true or false, type
!!value
javascript to create an event handler for attributes, type
‘click [attribute=value]’: func…
meteor: To add jquery, type
meteor add jquery
meteor: To return whether or not a Session variable is equal to a certain value, type
Session.equals(“varName”, “value”);
meteor: To add bootstrap, type
meteor add twbs:bootstrap
meteor: To update the database after a key is typed into a text box, use the event called
input
meteor: When using CollectionName.update use
the id of an object as the first argument
meteor: To turn the elements that you created an event from into a jquery object, type
$(event.target)
meteor: To add the google oauth package, type
meteor add accounts-google
google: To get a key and secret from googles dev console
search for API Manager in search bar and click Credentials on the left.
meteor: To do an if statement on a users profile data before publishing data, type
if (this.userId) {
var user = Meteor.users.findOne(this.userId)
if (user == ...) {
return CollectionName.find()
}
} else {
return this.ready()
}javascript: To handle a click event if it happens anywhere on the page excluding one place
create an if statement that checks the event.target and if it is the element you want to exclude return false
meteor: To add great fonts from a cdn, add the package
meteor add natestrauser:font-awesome
meteor: To use oauth, you must have added
the package accounts-ui, not accounts-pasword
meteor: To return the name of the currently logged in user in the template, type
{{currentUser.profile.name}}
meteor: Using {{currentUser}} in a template returns
Meteor.user()
meteor: To create a cursor that points to the users collection, type
Meteor.users.find()
meteor: To create a cursor that sorts the collection objects, type
CollectionName.find({}, { sort: {field1: -1} })
meteor: To publish only certain fields from a collection, type
CollectionName.find({}, { fields: {fieldName: 1, fieldName: 0} })
meteor: To run a function that alters the users profile immediately after the create it, type
Accounts.onCreateUser(function(options, user) {
})
meteor: When you create an event handler, always make sure
the event is occurring within the template you are putting the event handler in
meteor: For the app to remember what the data context should be, instead of using a route, you can
set all the links to set a Session var which stores the name of the relevant data context.
meteor: When creating a chat, before submitting the message you should
check if the message is empty by typing
if (messageVar.trim() == “”) {
return
}
meteor: To handle an event on the whole page, type
“click”: function(event, templateInstance) {
}
meteor: To return all documents where field1 matches exactly, type
CollectionName.find({field1: { $eq: “value” } })
javascript: to write an inline if statement, type
2 > 1 ? “returnIfTrue” : “returnIfFalse”
meteor: To create a dependency, type
var depName = Tracker.Dependency
meteor: A dependency is
an object that holds a list of your computations, and has a .changed() function that invalidates all your computations
meteor: To make a computation that depends on a dependency called dep, type
Tracker.autorun(function() {
dep.depend()
…
})
meteor: The attribute that makes a data source a reactive data source is that
it calls dep.changed() so that all of the dependent computations rerun.
meteor: Session.get(“value”) is an example of a
reactive data source
meteor: To create a computation that depends on a Session.get(), type
Tracker.autorun(function() {
Session.get(“value”)
…
})
meteor: To run a function directly after a CollectionName.insert type
CollectionName.insert({field1: ‘value’}, function(){
…
});
meteor: To call a function every time you receive an added DDP message, type
CollectionName.find({}).observe({
added: function(id, doc){
console.log("string")
}
})meteor: To create a computations that depends on changes to a collection, type
Tracker.autorun(function() {
CollectionName.find().fetch()
...
})
note: You must do something/anything to the cursor for it to call .changed()javascript: To evaluate an object key name
surround it with [key]
meteor: To create a new objectId based on an _id string, type
var objectIdInstance = new Meteor.Collection.ObjectID(“string”);
CollectionName.findOne(objectIdInstance);
meteor: To update a document attribute without removing any other data, you must use
{ $set: {attributeName: “value”} }
meteor: CollectionName.insert({}) automatically returns
the _id string
meteor: Mongo and Meteor insert new document ids
differently. Meteor uses strings, Mongo uses ObjectIDs
iTerm2 does not
paste a string with a trailing space
html: Numbers in html attributes must
go in quotes
learn to understand, why use sessionvar instead of var, which order a sort 1 and -1 goes,
d
meteor: To run app on iphone, type
meteor run ios-device
meteor: If you are not seeing the changes made in your code reflected in your iphone app
you should delete the app from the iphone and try to run it again
meteor: To allow mobile device to rotate with your app, type
window.shouldRotateToOrientation = function(degrees) {
return true;
}
into client code
meteor: To make a mobile phone vibrate when a collection recieve an added message, type
meteor add cordova:org.apache.cordova.vibration@0.3.10
if (Meteor.isCordova) {
CollectionName.find({}).observe({
added: function (doc) {
navigator.notification.vibrate(90000)
}
})
}
meteor: To create a route with flowrouter, type
FlowRouter.route('/:param1/param2', {
action: function() {
BlazeLayout.render("mainLayout", {content: "templateName"});
}
});meteor: To render the template name that is passed in as the “content” variable by flowrouter, type
-template name=”mainLayout”>
{{>Template.dynamic template=content}}
-/template>
meteor: To create the route, data context, template and template level subscription in flow router, type
meteor add kadira:blaze-layout
meteor add kadira:flow-router
FlowRouter.route('/:param1/param2', {
action: function() {
BlazeLayout.render("mainLayout", {content: "templateName"});
}
});
Template.templateName.onCreated(function() {
var self = this;
self.autorun(function() {
var param1 = FlowRouter.getParam('param1');
self.subscribe('subscriptionFunctionName', param1);
});
});
Template.templateName.helpers({
record: function() {
return CollectionName.findOne({_id: FlowRouter.getParam('param1') })
}
});
{{#if Template.subscriptionsReady}}
{{#with record}}
{{content}}
{{/with}}
{{else}}
Loading
{{/if}}
meteor: To add a use images in mobile apps
create a “public” folder and place the images there
write the paths to the images as if you are in the public directory
meteor: To set the icon and splash page you must
set them in mobile-config.js
http://stackoverflow.com/questions/26957503/meteor-way-to-specify-icon-and-launch-screen-of-an-app
meteor: For multi touch events, use
chriswessels:hammer
meteor: To deploy meteor to heroku, type
git commit -am “string”
heroku create –buildpack https://github.com/jordansissel/heroku-buildpack-meteor.git
heroku addons:create mongolab
open mongolab page and add a user/password in the user tab, then insert it into the provided mongo URI above
heroku config:add MONGO_URL=MONGOLAB_URI_from_heroku_page
heroku config:add ROOT_URL=https://your-app-name.herokuapp.com
heroku labs:enable http-session-affinity
git push heroku master
meteor: The folder structure of my meteor app should be
client | layout.html, project.css, name.js, views | view1.html, view2.html
server | name.js
lib | router.js, models.js (collection creation and schema)(any common code for client/server)
public | images, favicons, robots.txt
meteor: For prototyping it is fine to use {{> loginButtons}} but later you should
build your own UI and call functions like Accounts.loginWithPassword, Accounts.loginWithFacebook, Accounts.createUser and Accounts.forgotPassword directly
meteor: Flowrouters routes must go
in the lib folder
meteor: To use regular npm packages in metoer
meteor add meteorhacks:npm
meteor (this create packages.json)
add “packageName”: “1.0.0” to packages.json in root
use Meteor.npmRequire(“packageName”) when requiring in server methods
metoer: if you see ERROR whitelist rejection: error
add App.accessRule(‘*’); to mobile-config.js since it by default blocks remote hosts
