Abide does not work with Ember.js

[simlevesque]

When you combine Foundation with Ember.js, Abide stops working for no reason.

[mrsweaters]

Can you post your code?

[theworkerant]

I have the same issue, Abide is AWOL and no errors. I considered that data-abide="data-abide" might not get picked up as the example shows just data-abide (same for required)— so I changed them in DOM and reloaded foundation to no avail.

<form class="form-inline" data-abide="data-abide" data-ember-action="55">
  <fieldset>
    <div class="row">
      <div class="small-12 columns" data-bindattr-56="56">
        <label>Card Number<input id="ember2328" class="ember-view ember-text-field form-number" type="text" pattern="[a-zA-Z]+" required="required"></label><script id="metamorph-1476-start" type="text/x-placeholder">
</script><script id="metamorph-1476-end" type="text/x-placeholder">
</script>
      </div>
    </div>
  </fieldset>
</form>

Ran foundation again

$(document).foundation()

Also added the small error field thingy not shown in HTML above. No dice.

[theworkerant]

Got it working by pasting the code for abide into console and rerunning $(document).foundation(). This is not quite a solution but maybe a step forward?

https://github.com/zurb/foundation/blob/master/js/foundation/foundation.abide.js

[ekampp]

I'm having the same problem, but @theworkerant's solution doesn't work for me.

[theworkerant]

@ekampp Yea I gave up.

[ekampp]

Pity.

[gavro]

There's a fix for this, although it's a pity it is needed.
On every Ember.js pageload you will need to (re)init foundation, but with a slight delay. jQuery's document onready call will not suffice.

For example, I've made a RouteDefault, which is inherited by all Routes:

App.RouteDefaults = Ember.Mixin.create({
    beforeModel: function() {
        return loadTemplateStatic(this.routeName);
    },
    renderTemplate: function() {
        this.render();

        // need to re-init foundation after render.
        Ember.run.next(function() {
            window.scrollTo(0, 0);
            setTimeout(function(){
                $(document).foundation();
            }, 250);
        });
    }
});

So now for example the IndexRoute:

App.IndexRoute = Ember.Route.extend(App.RouteDefaults, {
    model: function() {
        // return whatever you need.
    }
});

On every pagerender/view Ember.run.next is executed and with an extra delay (I'm using 250ms, which suits my needs). When not using Abide, I don't need any delays though... Reveal and other plugins just work.

It's hackish, but at least it works....

[gavro]

Just a small update. You can even fix this easier. Include a scriptcall to the orbit.js file (or a concatted version of all foundation plugins) in a template. For example: I'm using a footer.hbs which is used on each Ember template:

[snip]
<script src="js/libs/foundation/index-ck.js"></script>
<script src="js/libs/scripts.js"></script>

All my own methods + needed foundation plugins are reloaded on each pageview. Seems to be working perfectly. No need to use a setTimeout when using this method.

[ekampp]

It seems like a large load, to reload every js file from foundation every time. 😞

[theworkerant]

Shouldn't there be a good javascripty reason for this happening in the first place? I was hoping someone who wrote the code might be able to point out some internal method to do this reload gracefully. Reloading the whole enchilada is kind of silly, although the best solution so far.

[ekampp]

If the foundation files are already loaded somewhere in the DOM, I guess that you can observe, when ever the basis view changes, and then reload the $(document).foundation()?

[theworkerant]

Calling $(document).foundation() doesn't do the trick, unfortunately.

[gavro]

@theworkerant It's got to do with "forms.on('submit validate)....." [line 64~89 @abide.js]. You can't really bind custom validation rules correctly when changing the entire dom on-the-fly continuously. Might be a way to fix it, I just don't know how to :(
Tried binding forms with:

      $(document)
        .on('submit validate', 'form[data-abide]', function (e) {
          var is_ajax = /ajax/i.test($(this).attr('data-abide'));
          return self.validate($(this).find('input, textarea, select').get(), e, is_ajax);
        });

and

      $(document)
        //.find('input, textarea, select')
        .on('blur change', 'input, textarea, select', function (e) {
          self.validate([this], e);
        })
        .on('keydown', 'input, textarea, select', function (e) {
          clearTimeout(self.timer);
          self.timer = setTimeout(function () {
            self.validate([this], e);
          }.bind(this), self.settings.timeout);
        });

... still no dice. Got some results, but it's still not reliable enough.

Kept debugging this... what works for me is to only reload foundation.abide.js on a pageview end THEN call $(document).foundation() . Not a horrible reload, just 7.5KB (uncompressed version).

[mrsweaters]

@garvo Changing the event bindings didn't work?

[smileyj68]

Unfortunately we're unable to support Foundation and Ember.js – if there's a pull request to correct this that is not impactful of other JS frameworks we'll consider that and merge it.

[geneh]

It worked for me: http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/

[chrishough]

This blew up for me with emberjs as well, and here is how I solved it : http://stackoverflow.com/questions/23877396/emberjs-embercli-foundation-5-scrolltop-undefined-on-mobile-responsive/23880012 with closed on zurb ticket #5226