Foundation.js + Backbone.js

Question

Has anyone tried using Backbone.js (latest 1.1) with the UI from Foundation (latest 5.2) ? I need to use the responsive Menu and Abide validation (both use Foundation Javascript)

I cannot re-initialize Foundation JS elements when I render the views, because all the elements from my container get destroyed, or moved from place to place and Foundation doesn't recognize them.

I tried calling $("#container").foundation() in each initialize function from each Backbone view, but that doesn't seem to work.

Does anyone know how to initialize Foundation more than 1 time, or make it see the new rendered elements?

Answer 1

This is an old question, but still comes up pretty high when searching for Backbone + Foundation. You are correct that foundation doesn't initialize any widgets rendered on the page after foundation itself has initialized. Here is how to work around it:

$('#newlyAddedForm').foundation({bindings: 'events'});

This is how I initialize abide validation on a form that is not present on the page at the time foundation initializes. Hope it helps.

Answer 2

So for backbone views, in the .render method, do:

this.$el.foundation({bindings: 'events'});

or just:

this.$el.foundation();