Simple modal pattern. Updated to make use of Template.dynamic, which allows passing in a dynamic template A pattern demonstrating a reusable modal dialog by dynamically rendering a Template using a Session value.
Templates <body><p>Body content</p><button class="modal" data-modal-template="modalOne">Modal One</button><button class="modal" data-modal-template="modalTwo">Modal Two</button> {{> modal}} </body><template name="modal"> {{#if activeModal}} <div class="modal"> {{> Template.dynamic template=activeModal}} </div> {{/if}} </template><template name="modalOne"><h1>Modal One</h1><p>...
</p></template><template name="modalTwo"><h1>Modal Two</h1><p>... Exporting Data From Your Meteor Application. What we're going to learn In this recipe, we'll be helping our pretend user Peter Venkman export his data from a social network called Blerg.
We'll learn how to help him get data out of our application and packaged up as a .zip file containing XML, HTML, JSON, and CSV files. Pre-Written Code Heads up: this recipe relies on some code that has been pre-written for you (like routes and templates), available in the recipe’s repository on GitHub. Connecting React Native and Meteor – Differential – Medium. Meteor Pattern: Two-Tiered Methods. Creating Packages. What are packages?
Let's say you're making your million dollar app and you realise that some of your functionaliy could be used in almost any app. How do you make that code independant to your app and sharable so anyone can plug it in to their own Meteor apps? It would be nice if you could just create a folder - put all the files related to that functionality into it, create a kind of 'setup' file that explains what it relies on (does it need jQuery? Using the Module Pattern with Meteor. The Meteor Chef. Meteor Tutorial - Let's build a Twitter clone (Part 1: Intro to Meteor) I want to show you how you can build a simple twitter clone using Meteor.
I started writing Meteor code a few months ago. I fell in love with the simplicity and the client/server abstraction. Meteor the most pleasant js framework I have ever worked with. The goal of this tutorial is to help you get started using Meteor. I will explain the 'Meteor' way of things without going into too much depth. David Weldon - meteor: how we define methods. Meteor.js Iron Router Filters, Before and After Hooks.
Introduction The Meteor.js Iron Router is the one package that helps me so much and is the first one I add in every application.
If you do not know the Iron-Router make sure to learn how to use it because it realy helps so much! The Iron Router basically decides what to render for the current Route (URL). Building a Jump Scroll Marketing Page with Meteor and OrionJS. Recently I needed to make a site for a personal project, and although I work on dynamic web apps for a living, I hadn’t had to make a proper, honest-to-goodness website for years.
There are plenty of well-known options out there for making sites quickly, like Wordpress and Squarespace, but why go for the quick option, I said to myself, when there’s a learning opportunity to be had (uh… right?). I enjoyed experimenting with Meteor for a previous blog post so I decided to see what I could do with that. I had a few requirements: I wanted to make a slick, modern, long-scrolling product marketing site I wanted to use full URL paths - rather than ID hashes - for the different page sections and have jump scrolling navigation around the page I should be able to add, remove and edit the page sections through a web interface Of course it should be responsive In this blog I’m going to work through making a product marketing website to these requirements.
Building a SaaS with Meteor: Stripe (Part 1) What we're going to learn In this recipe (part 1 of 2) we'll help a new SaaS startup Todoodle (a todo list creator) integrate Stripe into their app.
We'll learn about signing up users, creating customers and subscriptions in stripe, managing a customer's usage, and displaying a customer's current plan information. Getting Started Although there are multiple parts to this recipe, what we need in terms of packages is actually quite limited. Build Fast & Efficient Meteor apps. Building a Slack Clone in Meteor.js: Getting Started. This is the first of a five-part series on building a Slack clone using Meteor.
The aim of these tutorials are not just for you to blindly follow instructions, but it’s our hope that you’ll understand the thought process and reasoning behind the architecture. Installation. Exploring the Twitter API with Meteor.js by Paul Fernandez. The Twitter API is thoughtfully designed, and the data set that it provides access to is incredibly rich.
I wanted a super quick, no-fuss way to retrieve, process, and display tweet data on the web, and have been obsessed with Meteor.js ever since I started using it on our pet project Songnotes. It’s easier to set up an app and run a dev server than any other method I’ve encountered, and it keeps everything in JavaScript, meaning that I can display the data directly on the web with no intermediate hassle.
Plus it just feels so cutting edge. Since I didn’t find a straightforward tutorial on how to do this elsewhere on the web, I’ve outlined the steps I came to below. Step 1: Create your Meteor app. Publishing Reactive Joins in Meteor. Publishing many related documents from different MongoDB collections in your Meteor app can be a hairy problem.
You might find yourself calling Meteor.publish several times to get all the documents you need pushed to the client. The reywood:publish-composite package was created to solve this problem in a flexible manner. It exposes one new function called Meteor.publishComposite. Meteor, React and Material UI the easy way. There are technologies that are cool standalone but don’t immediatly play nice together. material-ui-demo.meteor.com (source) Meteor: the fullstack web platform with data synchronization client/server (DDP)React: the virtual DOM UI library from FacebookMaterial UI (React): the implementation of the Material UI / Polymer components without the webcomponents part (aka the Material UI that works today)Babel: the the ES6/7 transpiler and the easiest way to deal with React components. Meteor Tips and Workarounds. Meteor Tips and Workarounds Here are a few things that I've learned while working on Dominus that I wish I had known when I started working with Meteor. Local template variables Meteor sessions are great but sometimes you want a local variable that you can pass between helpers, events, and created/rendered functions.
Here’s an example with sessions. <template name=”info”> {{text}}</template> Understanding Meteor Publications & Subscriptions. The way Meteor handles an app’s data is one of the framework’s greatest assets, but also one of the hardest things to wrap your head around when you’re just getting started. This has led to a lot of misunderstandings, such as the belief that Meteor is insecure, or that Meteor apps can’t deal with large amount of data. So today, I’d like to take a moment to clear up a few of these misconceptions by explaining Meteor publications and subscriptions. Building a Slack Clone in Meteor.js: Real-Time Data. This is the second of a five-part series on building a Slack clone using Meteor.
The aim of these tutorials are not just for you to blindly follow instructions, but it’s our hope that you’ll understand the thought process and reasoning behind the architecture. If you followed along with our previous article, you’d understand the killer features of Meteor, installed it on your machine and created the layout and styles of our apps using templates. We have also explained what Meteor does behind the scenes. In this lesson, we will code the beef of the application and produce a fully-functional, live-updating chat room. Using MongoDB aggregations to power a Meteor.js publication. I often hear Meteor.js take some flak for only working with MongoDB. I thought it would be fun to dive into a native Mongo feature and how to implement it in your app. This article is about a way to publish aggregate data using the MongoDB aggregation framework with Meteor.js. What is the MongoDB aggregation framework, you may be asking? David Weldon - meteor: get text.