Every Nth Item in Handlebars

You’re all jazzed and using your favourite CSS grid but you’ve run into a wall in your Handlebars template. You’ve got a template that outputs a list of books. The problem is after every third book you need to start a new row. You’re stuck. Well… look no further I’ve got just the helper for you, grouped_each. It’s part helper, part convention. Stronger than mere mortal men.

Here’s how it works. It has two parameters. The first is the number items in each group and the second is an array of items. That’s the helper part. Now here’s the convention. Inside the grouped_each block you use the built-in each helper to iterate over this. For example look at the following Handlebars template.

And finally here’s the magic sauce that is the helper.

Integrate Handlebars with Marionette

If you need to use Handlebars with Marionette then today is your luck day! I’ve got just what your looking for. This first attempts to load pre-compiled templates, then by selector, and finally via XHR.

To customize the file extension and location of your templates when loading via XHR just override Marionette.Handlebars

Passpack + Chrome = Frustration

Everyday I log into Passpack and leave it open all day. So here’s the problem after having Passpack open for a while I get the following message (it is extremely annoying as it interupts whatever else your up to on the net). This only happens for me in Chrome. It works like butter in Firefox and I can’t speak for IE.

Passpack History Problem

The initial trigger for the message seems to be random. But after it initial message is seems to come back around every 3 minutes. So I did some digging. After poking around in the source I discovered that they’re using an older version of Tako Sano’s jQuery history plugin.

So I added some code to the historyCallback do some logging so I could get a better feel for what was going on.

After letting this run for a while I started to see a pattern. Here’s an excerpt of the results.

  • hh: 8, m: 7, delta: 209901 (~3.4 minutes)
  • hh: 8, m: 7, delta: 200888 (~3.3 minutes)
  • hh: 8, m: 7, delta: 190944 (~3.2 minutes)
  • hh: 8, m: 7, delta: 183514 (~3.0 minutes)
  • hh: 8, m: 7, delta: 197517 (~3.3 minutes)

For webkit (Chrome/Safari) based browsers the jQuery history plugin manually creates a stack to keep track of the history. So this is where I believe we are encountering the problem. If you look at line 4426 you can see that we create a history with a stack length of 9.

But on line 4419 we are working with a stack with a length of 8.

var m = $.browser.netscape ? 2 : $.browser.msie ? 3 : 7;

Shouldn’t this read as follows?

var m = $.browser.netscape ? 2 : $.browser.msie ? 4 : 8;