在 Ember-cli 中使用 mixins？答案

【问题标题】：Using mixins with Ember-cli?在 Ember-cli 中使用 mixins？
【发布时间】：2015-02-07 03:54:33
【问题描述】：

我有一个 mixin app/mixins/ui-listener.js，我正在努力将其与 Ember-CLI 一起使用。我正在尝试使用具有以下语法的 mixin：

import ListenerMixin from './mixins/ui-listener';
export default Ember.Component.extend(ListenerMixin,{
    // class definition
}

当我保存它时失败，抱怨

ENOENT，没有这样的文件或目录 'tmp/tree_merger-tmp_dest_dir-74tK3rvD.tmp/[app-name]/components/mixins/ui-listener.js'

“mixins”目录嵌套在“components”目录下似乎很有趣（因为 Ember-CLI 将这些目录置于同一级别）但这可能只是一个 Brocoli 构建步骤。无论如何，任何帮助将不胜感激。

【问题讨论】：

./ 表示此目录应为../，您缺少.
@BasementKeyboardHero 这是正确的......我使用了网站上的示例，显然应该更新。
你能把我链接到那个例子吗
您可以在这里找到它：ui-listener。它涵盖了目前的调整大小和可见性事件。我将在接下来的几天内添加滚动事件。最终目标是作为 CLI 插件发布。
我的意思是您从中提取它的网站。

标签： ember.js ember-cli

【解决方案1】：

您可以转到config/environment.js 并检查属性modulePrefix，而不是将../（或更糟糕的../../../）添加到您的导入中。假设前缀是app-client。

然后，您可以改用import UIListen from 'app-client/mixins/ui-listener'; 导入。如果您处于“深”子路线等，绝对效果最好。

【讨论】：

因此，以这种方式导入将解决您的路径问题（./ vs ../ 问题），并将处理您将来可能遇到的任何其他路径问题。
这是一个很棒的答案！做 '/../../../' 是一个 PITA，然后我发现了这个。谢谢！
当然，使用“modulePrefix”肯定会有所帮助，尤其是当您的应用程序开始深入多个文件夹时。

【解决方案2】：

我不知道你如何导出你的 mixin，但这应该可以工作：

在mixins/ui-listener.js:

import Ember from 'ember';

export default Ember.Mixin.create({
 //some stuff
});

在components/my-component.js:

import Ember from 'ember';
import UIListenerMixin from '../mixins/ui-listener';

export default Ember.Component.extend(UIListenerMixin, {
 // some stuff
});

【讨论】：

我会接受你的回答，因为你把它放在一个答案格式中，但实际上@BasementKeyboardHero 在上面的评论中指出了这个问题。我在参考中遗漏了“..”。
混入不是使用 Ember.Mixin.create(...) 而不是 .extend(...) 创建的吗？