标签: ember-cli-addons

在我的ember-cli应用程序中,我安装了一个名为的插件'ember-cli-selectize'.查看目录结构,我可以看到它的文件位于/node_modules/ember-cli-selectize'.现在我想创建一个扩展此插件的自定义组件.我如何导入/要求它？我试过这些似乎没有工作:

var EmberSelectize = require('/ember-cli-selectize/app/components/ember-selectize');

import EmberSelectize from 'components/ember-selectize';

import EmberSelectize from 'node_modules/ember-cli-selectize/addon/components/ember-selectize';

import EmberSelectize from 'ember-cli-selectize/addon/components/ember-selectize';

我总是得到这个'找不到模块'的错误,无论如何.我需要以某种方式导入/要求它做类似的事情

import EmberSelectize from 'wherever/it/is';
export default EmberSelectize.extend({
  //my own customizations
})

我正在开发一个ember-cli项目,我正在开发一个系统,允许我解析尚未加载的模板,并且可能存在于项目结构之外.

我想在我的dist/assets目录中调用一个文件夹templates,在该文件夹中将是所有预编译的模板app/templates/external.这是我目前Brocfile.js用西兰花炖的尝试

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var stew = require("broccoli-stew");

var app = new EmberApp({
  vendorFiles: {
    "jquery.js": null
  },
  sassOptions: {
      includePaths: [
        'bower_components/bourbon/app/assets/stylesheets/',
        'bower_components/neat/app/assets/stylesheets/',
        'bower_components/bitters/app/assets/stylesheets/'
      ]
    }
});

var additionalTrees = [];

var templateFiles = stew.find(appTree, "assets/app/templates/external");
templateFiles = stew.mv(templateFiles, "assets/app/templates/external", "assets/templates");
additionalTrees.push(templateFiles);

module.exports = app.toTree(additionalTrees);

我想知道在插件项目中创建组件时使用的约定是什么...如果我使用ember-cli@0.2.0在我的插件项目中生成组件,蓝图将在插件/组件中创建一个js文件,插件/模板/组件中的模板,以及app/components中的js文件.我不清楚的部分是这些组件的模板应该存在的地方.如果我的组件模板需要部分模板,我需要将部分模板放在app/templates目录中.如果它位于addon/templates目录中,则无法解析.所以问题是:最好将所有模板(组件模板和部分模板)放在app/templates目录中,或者将组件模板保留在addon/templates/components目录中,将部分模板保留在app/templates目录中？后者感觉有点混乱,前者似乎更正确,只是因为蓝图的行为.有人有任何见解吗？

提前致谢.

我通过Bower成功导入了一个jQuery插件,用于Ember-cli插件中的一个组件.但是,这只是因为我在插件和使用应用程序中定义了对此插件的Bower依赖性.

这似乎我做错了.为什么消费应用程序必须声明对应该与插件一起提供的资源的依赖？

事情的关键似乎是app建设时的背景.如果我import在addon的index.js文件中使用以下语句,我可以省略使用应用程序中的Bower依赖项:

app.import('node_modules/my-ember-cli-addon/bower_components/jquery.stickyHooters/dist/jquery.stickyHooters.min.js');

...但是当我将插件构建为独立应用程序时,这会中断.在这种情况下,此路径是必需的:

 app.import('bower_components/jquery.stickyHooters/dist/jquery.stickyHooters.min.js');

这是如何工作的？

1. 在两个地方宣布Bower依赖似乎是违反直觉的
2. 我不知道如何检测插件中的app上下文index.js

我最近按照本教程中的步骤概述将Liquid Fire添加到我的Ember CLI 0.2.3项目中:http://www.programwitherik.com/doing-animations-and-transitions-with-liquid-fire-and-ember/

我用npm install --save-dev liquid-fire添加了Liquid Fire.我添加了一个transitions.js文件,其中包含教程中概述的代码.我用{{liquid-outlet}}替换了{{outlet}}.没别的了.什么都没发生.日志或控制台中没有错误,并且插座没有显示任何内容.我已经尝试了教程所说的内容.我错过了让{{liquid-outlet}}工作的步骤吗？

我正在创建ember插件,这个插件需要正常工作的css样式很少!

我如何添加它们,以便当一个消费应用程序使用此插件时,特定的css样式直接添加到消费应用程序的app.css文件中？

例如:插件:dropdown-addon需要一种风格

.active-menu {
    background-color: #4183C4;
}

消费应用程序:在线表格

当在线表单使用dropdown-addon时,我希望.active-menu自动添加到app.css!

我正在尝试创建我的第一个Ember AddOn,而我却陷入了将其导入Ember项目的困境.我已经创建了插件并像这样发布到github:

ember-cli$ ember addon test-addon
ember-cli$ cd test-addon
ember-cli/test-addon$ git remote add origin <github-url>

然后,从我的项目,我安装插件:

test-app$ ember install <github-url>

最后,尝试将其导入路线:

# app/rotues/index.coffee
import TestAddon from 'test-addon'

但是,我在控制台上收到此错误:

Uncaught Error: Could not find module `test-addon` imported from `test-app/routes/index`

我出错的任何想法？我可以看到node_modules目录中的插件但不是bower_components.我认为(这个)这是我的问题,但我不确定我还需要做些什么来设置我的插件.

我正在使用ember-cli来构建我的应用程序，它为我提供了一个很好的app.js文件，我可以在静态资产服务器上提供该文件。在部署时允许单独配置的最惯用的方法是什么？

例如，我可能会告诉我的app.js文件的使用者包含一个config.[js|json]将被加载的额外文件，并且该文件中的值将进入ENV对象......以便我可以将应用程序指向不同的 REST 端点，例如（QA、沙盒、预发布等）而无需重新编译。

我想一定有办法，我只是没有看到。我知道有config/environment.js文件，但它被编译到dist文件夹中。我正在寻找位于打包 JS 旁边的东西。我当然可以一起破解一些东西，所以我不是在寻找黑客。一个ember-cli-addon，也许？我认为必须有一种“余烬方式”来做到这一点。

我只是没有找到它:)

我有一个插件,需要将一组JS文件从其凉亭目录复制到Ember应用程序的根目录/dist(这是与服务工作者相关的范围规则).我想也许我可以使用treeForApp钩子,但是当我没有错误时,我也没有得到理想的结果.

该index.js方法是:

const Funnel = require('broccoli-funnel');

module.exports = {
  name: 'ember-upup',
  treeForApp: function(tree) {
    tree = new Funnel(tree, { include: 
      [ 
        'bower_components/upup/dist/upup.min.js',
        'bower_components/upup/dist/upup.sw.min.js' 
      ]});

    return this._super.treeForApp.call(this, tree);
  },

注意:我想我可以通过简单地将javascript文件作为index.js postBuild钩子的一部分来复制来解决这个问题,但是当这个DOES将JS文件放入dist文件夹的根目录时,ember serve如果没有通过一个文件夹,它就不会被ember-cli服务它的构建管道.

Stefan Penner现在已经指出该dist目录供开发人员查看,但服务实际上是在tmp目录结构中完成的...这解释了为什么我的"hack"无效.

在ember-cli文档中,它描述了通过自己覆盖app/component/[addon-name.js]来在宿主应用程序中桥接插件.但是,文档没有明确说明如何执行此操作.

通过试验和错误,我注意到通过在[主机应用程序]/app/component/[addon.js的名称]中创建一个组件文件,只需将插件复制/粘贴到那里就可以自定义插件.然而,这是一种可怕的方法,我想我可以简单地覆盖有问题的函数......并且在某些情况下调用this.super().functionName以保持过度乘坐简单和修剪.

但是,我不能让这个工作.有任何想法吗？