0

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: -------------------------------
4

1 回答 1

2

现在这花了一些时间，但我遇到了一些可靠的帖子Ember-JS-After-Render-Event和 coderwall 示例，其中概述了如何在模板渲染后提取要执行的代码段。更进一步，幸运的是，我发现这两个线程基础问题 1840和基础问题 3206抱怨 abide 库没有正确加载。答对了！这就是问题所在。这是我解决它的方法。

app/external/view-reopen.js首先使用以下代码 创建一个中心文件：

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
  }
});

而不是像这样将该视图挂钩到app.js文件中的应用程序加载程序进程中：

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;

现在是最后一部分，我觉得这很脏。事实证明，每个视图的基础都必须重新初始化，就像传统的客户端服务器应用程序一样。为了实现这一点，我不得不修改我的所有视图以触发$(document).foundation();自定义afterRenderEvent事件。 

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

虽然这解决了问题，但必须有更好的方法来解决这个问题。也许，也许不是。

于 2014-05-27T02:01:57.073 回答