ember-cli@0.2.0插件中的组件模板

Rya*_*lly 8 ember-cli ember-cli-addons

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

提前致谢.

pzu*_*raq 11

Ember-cli正在大力发展,所以很多文件结构很快就会改变,但是这里有一些关于文件夹结构当前状态的见解以及为什么它按照它的方式排列:

app/文件夹是直接导入您的应用程序的.从这里拉出助手,这就是为什么你必须为这个文件夹中的每个组件都有一个文件.此外模板会从主应用程序在这里被拉伸,因此他们将在模板通常处于余烬应用程序(可访问的方式访问render,partial以及标准分辨率).

有些人选择将所有组件代码放入其中app/,但这不是一个好主意,因为该addon/文件夹不仅存在于插件代码的分离,而且还存在于使用ES6导入导入的方式.因此,虽然您无法直接访问下面的组件addon/components/,但您可以将它们导入到您的应用程序中,如下所示:

import SomeComponent from 'some-addon/components/some-component'
Run Code Online (Sandbox Code Playgroud)

如果他们想扩展插件以添加某些功能,这对插件使用者非常有用.

addonget中的模板在构建树中进行预编译,这使得插件更加健壮(例如,如果他们使用不同版本的htmlbars,它们仍将与基础应用程序兼容).但是,它们无法通过解析器访问,因此您必须在插件的组件中手动导入它们,这就是为什么addon组件的蓝图如下所示:

import Ember from 'ember';
import layout from '../templates/components/some-component';

export default Ember.Component.extend({
  layout: layout
});
Run Code Online (Sandbox Code Playgroud)

插件的样式可以放在addon/styles/app/styles/.在addon/styles/它们中也是预编译的并且默认包含在应用程序中.我强烈建议包含样式,app/styles因为这可以使用基本应用程序中的预处理器导入来访问它们:

@import some-addon/main.css
Run Code Online (Sandbox Code Playgroud)

这使得它们对于插件的用户来说是完全可选的,而不需要求助app.importconfig欺骗(这很好,因为嵌套的插件_do不支持app.import.不要使用它.)

注意:它们不会自动命名,因此您应该将样式放在一个文件夹中,以确保它们不与其他插件样式冲突.

综上所述:

  • 任何插件代码不需要由基本应用程序通过帮助程序,初始化程序等直接访问.应该住在 addon/
  • 您想要通过ES6导入访问的任何内容都应该存在 addon/
  • 模板应该存在addon/templates/并手动导入
  • 应该包含在标准Ember构建链中的组件存根,初始值设定项和其他文件应该存在 app/
  • 样式应该存在app/styles/并且应该在文件夹中命名(例如app/styles/some-addon/)
  • 不要用app.import.