javascript - emberjs embercli Foundation 5 滚动顶部未定义移动响应

Question

我正在努力将 Foundation 5 耦合到我的 ember 应用程序中，但使用 topbarjs 的导航遇到了一个新问题。从桌面查看应用程序时，一切都很顺利，但是，当您展开 Chrome 开发控制台以强制设计进入响应模式时，汉堡菜单会触发此消息。

控制台错误消息是:

Uncaught TypeError: Cannot read property 'scrolltop' of undefined

此问题可以在此代码存储库中重复:chrishough/embercli-emberjs-stackoverflow

我的假设是它与示例导航中的 # 符号有关:

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

我正在使用ember cli构建我的 ember 应用程序的项目。

发表本文时的当前设置:

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

Answer 1

现在这花了一段时间，但我发现了一些可靠的帖子 Ember-JS-After-Render-Event ，和 coderwall example概述了如何提取模板呈现后要执行的代码段。更进一步，真的很幸运，我找到了这两个线程 foundation issue 1840和 foundation issue 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
  }
});

然后将该 View Hook 到 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;

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

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

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