background preloader

Tips, tricks, stackoverflow

Facebook Twitter

Spacebars Secrets: Exploring Meteor Templates. The recent Meteor 0.8 update featured Blaze, a complete rewrite of Meteor’s UI system.

Spacebars Secrets: Exploring Meteor Templates

And with Blaze came along Spacebars, a replacement for Handlebars, the templating language Meteor was previously using. Spacebars and Handlebars share the same syntax, but Spacebars brings quite a few Meteor-specific innovations. In this article, we’ll take a look at a few of these time-saving techniques, including: Creating custom helpers. Using JavaScript objects as arguments. Let’s get started! Custom Helpers This isn’t new to Spacebars, but it’s worth pointing out because it can make your code much more concise. You could write a simple helper: And then use it inside your template: <template name="profile"><h3>{{name}}</h3><h4>{{createdAtFormatted}}</h4><p>{{bio}}</p></template> This works great, but you might need to format multiple timestamps across your app, thus leading to duplicated template helpers.

And invoke it right from your template: Objects as Arguments Smarter Attributes Content Blocks. Introducing Portable Meteor User. You might have got bored with my articles over the last couple of weeks as almost all of them have been related to performance and scaling.

Introducing Portable Meteor User

So this time I decided to show you something cool and useful. It’s a portable user I’m really not sure whether “portable” is the right term to use here. However, I’ll show you an easy way to transfer login states across browsers without re-entering username/password combinations. You don’t required to use any additional tool or code modifications. Watch the demo first! Creating a portable version of you I’ll show you how easy it is. You will then receive an alert with a code. This code can be passed on to other users via chat, email, or even SMS. How to use a portable meteor user Very simple :) Visit the related meteor app using Google Chrome, and execute the code you generated in the browser console.

How useful is this It depends. What’s happening behind the scenes There is no magic here. Is this bad? Meteor vs. the Twitter API via wrapAsync and Twit · GitHub. Twit and other Node libraries don't always quite drop into Meteor's reactive architecture right out of the box.

Meteor vs. the Twitter API via wrapAsync and Twit · GitHub

Luckily Meteor makes adapting them super-duper easy with wrapAsync. It was so easy that I naturally tried all the more difficult ways first! Since I didn't find a nice gist or StackOverflow example, please enjoy this one. In the template - {{#with pos}} {{#if ready}} {{> singlePosition data }} {{/if}} {{/with}} In client.js - In server.js - Way easier than manually using bindEnvironment or Futures! Iron router - Waiting data while dynamically loading templates in Meteor.js.

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.

Meteor Tips and Workarounds

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> Template.info.created = function() { Session.set(‘text’, ‘foo’)} This works but the session variable is global. Template.info.created = function() { this.text = new ReactiveVar(‘foo’) this.text.set(‘foo’)} Now not only is the variable local instead of global it is local to that instance of the template.

Don’t render until ready If there is a noticeable lag when a template renders don’t render the slow helpers until they’re ready. Here’s an example of how it worked. <template name=”castleInfo”> {{complicatedHelper}}</template> This created a couple seconds of lag when the user clicked on their castle. Dominus. Javascript - Using Multiple Mongodb Databases with Meteor.js.