Question

我尝试使用ember-cli创建一个插件。这是我到目前为止所做的一步一步：

sudo ember addon test-addon
cd test-addon
sudo ember serve

现在服务器运行并且在localhost：4200上我可以看到测试/虚拟应用程序的应用程序hbs。

欢迎来到Ember.js

是时候为插件制作一些组件了：

sudo ember g component my-form

在 tests / dummy / app / templates / application.hbs 中我添加了的 {{我的形式}}

现在我收到以下js错误：

未捕获错误：无法找到从test-addon/components/my-form

导入的模块dummy/components/my-form

修改

在与npm稍微挣扎之后，我再次尝试了（没有sudo）并且发生了同样的事情。我在Ember CLI 0.2.1上。这是我的文件，但它们应该是相同的，因为它们是自动生成的。该错误是从 bower-components / loader.js / loader.js第110行引发的。

附加/组件/我的-form.js

import Ember from 'ember';
import layout from '../templates/components/my-form';

export default Ember.Component.extend({
  layout: layout
});

附加/模板/组件/我的-form.hbs

{{yield}}

应用/组件/我的-form.js

import myForm from 'test-addon/components/my-form';

export default myForm;

Answer 1

看起来（as of July 2015, anyway）事实模板在插件中不起作用部分是设计的。从哲学上讲，我认为理由是样式应该是特定于应用程序的，但JS逻辑可以共享。或者它只是一个错误/疏忽。

事实证明，如果您只是删除该布局线和导入布局，它将起作用。

结果如下：

<app-name>/app/templates/includes-a-shared-component.hbs：

What follows is my shared component! {{my-shared-component}}

<addon-name>/addon/components/my-shared-component.js：

import Ember from 'ember';

export default Ember.Component.extend({
  valueFromProperty:function() { // simple hello-world-style function
    return 5;
  }.property()
});

<app-name>/app/templates/components/my-shared-component.hbs：

Hey look I'm the app-specific style for your component <marquee>Hello world</marquee>
Here's a value from a property: {{valueFromProperty}}

我的版本：恩伯：1.13.1 节点：0.12.0 npm：2.12.1

Answer 2

与我之前的答案相比，这是一个非常不同（和IMO更好，但并不完美）的答案。

<addon-name>addon/components/test-component.js：

import Ember from 'ember';

export default Ember.Component.extend({
  valueFromProperty:function() {
    return 5;
  }.property(),

  layout:Ember.HTMLBars.compile("I'm the addon's layout {{valueFromProperty}}")
});

您需要将模板编译器添加到您的应用中：

<app-name>/app/ember-cli-build.js：

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });
  app.import('bower_components/ember/ember-template-compiler.js');
  ... other stuff...

请注意，插件组件中的布局属性会完全覆盖您的应用内模板，因此每个应用的自定义变得更加困难。但是，如果您希望自定义模板，则可以使用我的其他答案，而不是指定布局，只需让解析器在应用中找到模板。

Answer 3

我发现的另一种方法是有效的，与我的其他答案不同。

让我们说你已经在你的插件中完成了ember g component my-addon-component。

这将导致您的组件位于：<addon-name>/addon/components/my-addon-component.js，模板位于<addon-name>/addon/templates/my-addon-component.hbs（至少使用我当前的ember-cli）。
您还会在<addon-name>/app/components/my-addon-component.js

处拥有一个微小的组件存根

修复： 1.将组件内容从<addon-name>/addon/components移动到<addon-name>/app/components（替换存根） 2.将模板从<addon-name>/addon/templates/components移至<addon-name/app/templates/components

1之后：import layout from ../templates/components/my-addon-component现在具有不同的含义：它将从包含应用程序的命名空间而不是插件的命名空间中导入。

2之后：模板的导入位置将位于include-app的命名空间中。这也似乎意味着它会被应用程序编译，因此您不会抛出＆＃34;检测到插件模板，但没有注册模板编译器＆＃34;

Ember CLI在插件中生成组件

修改

3 个答案: