Emberjs embercli foundation 5 scrolltop未定义移动响应

emberjs embercli foundation 5 scrolltop undefined on mobile responsive

本文关键字：未定义 移动 响应 scrolltop embercli foundation Emberjs      更新时间：2023-09-26

我正在努力将基础5结合到我的ember应用程序中，并且我遇到了使用topbarjs的导航的新问题。当从桌面查看应用程序时，一切都工作得很好，但是，当您扩展chrome开发控制台以强制设计进入响应模式时，汉堡包菜单会触发此消息。

控制台错误信息为:

Uncaught TypeError: Cannot read property 'scrolltop' of undefined

这个问题可以在这个代码库中重复:chrishough/ember -emberjs-stackoverflow

我的假设是它与示例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>

我正在使用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: -------------------------------

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

首先用以下代码创建一个中心文件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;

现在是最后一部分，我觉得很脏。事实证明，必须为每个视图重新构建基础，就像传统的客户机服务器应用程序一样。为了实现这一点，我必须修改我所有的视图，用自定义的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();
        //------------------------------------------------------------
    }
    //------------------------------------------------------------
});

虽然这解决了问题，但一定有更好的方法。也许，也许不是。

相关文章：