Question

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

控制台错误消息为：

未捕获的TypeError：无法读取属性＆＃39; scrolltop＆＃39;未定义的

此问题可以在此代码库中重复：chrishough/embercli-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: -------------------------------

Answer 1

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

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

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

emberjs embercli基础5 scrolltop undefined在移动响应

1 个答案: