emberjs embercli foundation 5 scrolltop undefined on mobile responsive

Question

I am working to couple foundation 5 into my ember application and I am running into a new issue with my navigation that uses the topbarjs. Everything works peachy when viewing the application from the desktop, however, when you expand the chrome dev console to force the design into responsive mode, the hamburger menu triggers this message.

Console error message is:

Uncaught TypeError: Cannot read property 'scrolltop' of undefined

This problem can be duplicated in this code repo: chrishough/embercli-emberjs-stackoverflow

My assumption is it has something to do with the the # symbol in the example nav:

<nav class="top-bar" data-topbar data-options="scrolltop:false;is_hover:true;">
    <ul class="title-area">
        <li class="name">
            TEST
        </li>
        <li class="toggle-topbar menu-icon">
            <a href="#"></a>
        </li>
    </ul>
    <section class="top-bar-section center">
        <ul class="nav-header">
            <li><a {{action goToAnchor 'index' 'menu1'}}>menu1</a></li>
            <li><a {{action goToAnchor 'index' 'menu2'}}>menu2</a></li>
            <li><a {{action goToAnchor 'index' 'menu3'}}>menu3</a></li>
            <li><a {{action goToAnchor 'index' 'menu4'}}>menu4</a></li>
            <li><a {{action goToAnchor 'index' 'menu5'}}>menu5</a></li>
        </ul>
    </section>
</nav>

I am using the ember cli project to build my ember application.

Current setup at the time of this post:

DEBUG: -------------------------------
DEBUG: Ember      : 1.5.1
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 2.1.1
DEBUG: -------------------------------

Chris Hough Chris Hough · Accepted Answer · 2014-05-27T02:01:57

Now this took awhile, but I came across a few solid posts Ember-JS-After-Render-Event, and coderwall example that outlined how to extract segments of code to be executed after the template is rendered. Taking this one step further, by luck really, I found these two threads foundation issue 1840 and foundation issue 3206 which were complaining about the abide library not loading properly. Bingo! That was the issue. Here is how I solved it.

First create a central file app/external/view-reopen.js with the following code:

export default Ember.View.reopen({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent : function(){
    // Implement this hook in your own subclasses and run your jQuery logic there.
    // Do not add code here as this fires after EVERY didInsertElement event
  }
});

than hook that view into the application loader process in the app.js file like so:

import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import View from './external/view-reopen';

Ember.MODEL_FACTORY_INJECTIONS = true;

var App = Ember.Application.extend({
  modulePrefix: 'frontend',
  Resolver: Resolver
});

loadInitializers(App, 'frontend');

export default App;

and now for the final part, which I feel is pretty dirty. As it turns out foundation must be reinit for each view just like a traditional client server application. In order to accomplish this, I had to modify ALL of my views to fire off $(document).foundation(); with the custom afterRenderEvent event.

export default Ember.View.extend({
    layoutName: 'layouts/home',
    templateName: 'views/home/index',
    tagName: 'main',
    classNames: 'view-home-wrapper',
    //------------------------------------------------------------
    afterRenderEvent : function(){
        //------------------------------------------------------------
        $(document).foundation();
        //------------------------------------------------------------
    }
    //------------------------------------------------------------
});

While this solved the problem, there must be a better approach to this. Maybe, Maybe not.

emberjs embercli foundation 5 scrolltop undefined on mobile responsive

1 Answers